当前位置:  开发笔记 > 编程语言 > 正文

是否可以在列表中的背景图像上触发jQuery单击事件?

如何解决《是否可以在列表中的背景图像上触发jQuery单击事件?》经验,为你挑选了1个好方法。

我有一个无序的项目列表,这样的东西,为简洁而缩短:


我将列表设置为样式,但这3种样式处理列表项的背景图像:

#elementsContainer ul li {
    list-style:none;
}
#elementsContainer a {
    background: transparent url(/images/icons/bullet_delete.png) no-repeat 5px 50%;
}

#elementsContainer a:hover,
#elementsContainer a:focus,
#elementsContainer a:active {
    background:#fff url(/images/icons/delete.png) no-repeat 5px 50%;
}

该列表看起来很棒 - 它为每个列表项的文本左侧添加了一个小删除图标.但是,我希望使用jQuery(1.3)来处理每个项目的点击事件,我希望列表项的背景图像和列表项的文本之间具有单独的功能.如果我单击图像,我想删除该项目.如果我单击文本,我想编辑该项目.

我开始使用这样的东西:

$("a").live("click", function(event){
  alert( $(this).text() );
});

但我没有看到$(this)或"event"中的任何内容,我可以确定是否单击文本或图像.

是的,我知道我可以只有一个单独的"img"标签并单独处理它的点击.如果这是唯一的选择,我会走那条路.我只是想知道是否有某种方法可以使它在背景图像上工作.

提前致谢!



1> Parrots..:

使用IMG标记.您可以做到的最好的方法是检测LI元素本身的点击,这最终会变得混乱.IMG标签(甚至是围绕它的A标签用于语义良好和降级良好的页面)将最有效.

使用LI中的IMG,你应该没有太多问题使它看起来相同,我在列表中一直做类似的事情,我需要删除/编辑图标.

推荐阅读
Chloemw
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有