是否有可能触发列表的背景图像上的jQuery的单击事件？

Question

我有物品的无序列表，像这样，缩短为了简洁：

<div id="elementsContainer">
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</div>

我的风格了名单，但是这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），以处理click事件的每个项目，我想列表项的背景图像和列表项的文本之间的单独功能。如果我点击的形象，我想删除的项目。如果我点击的文字，我想编辑的项目。

我开始使用这样的：

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

但我没有看到任何$（本）或“事件”，我能确定，如果我单击文本或图像。

是的，我知道我可能只是有一个单独的“IMG”标签，并单独处理上的点击。我会走这条路如果这是唯一的选择。我只是想知道是否有某种方式来让它背景图像上工作。

提前感谢！

Answer 1

与IMG标记转到。最好你能做到这一点检测LI元素本身，这将最终被凌乱的点击。 img标签（甚至是它周围的标签语义善良和漂亮降解页）最适合。

您应该不会有太大问题，其样式，使用LI内的IMG看起来一样的，我做我需要删除/编辑图标列表中的类似的东西所有的时间。

Answer 2

您不能分辨背景图像上点击，因为只要DOM而言，这是不是真的存在。所有你必须是a元素本身（这恰好与你的背景图片呈现），只要你单击该标签，文本内的任意位置或不其onclick处理程序将闪光。

这可能是最好使用img标签（或其他独立的标签），并分别处理上的点击，当你在你写了总结。

Answer 3

你可以为想要的效果做的是把一个跨度一些空间，该删除的图像最终将出现，然后将事件挂钩到跨度的点击区域。

Answer 4

把一个元件在其上，并窃取注册该事件。