jQuery：单击嵌套元素

我有以下标记

 
 @qItem.CategoryText  
  

和以下脚本

 $(".ListItem").click(function(){ doActionA(); }); $(".deleteIcon").click(function(){ doActionB(); }); 

---

当我点击图片时，它也会触发ListItem的点击。 我理解这是因为图像在ListItem中。 但我希望单击图像时不触发ListItem的点击。 有没有办法做到这一点？

Answer 1

 $(".deleteIcon").click(function(e){ doActionB(); e.stopPropagation(); }); 

Answer 2

您需要使用event.stopPropagation（）来阻止事件冒泡DOM树。

 $(".deleteIcon").click(function(event){ event.stopPropagation() doActionA(); }); 

使用delete图标绑定的事件是使用ListItem触发父事件绑定，因此当子元素是事件源时，您需要停止父事件的传播。

Answer 3

 $(document).on("click", ".deleteIcon", function() { doActionB(); }); 

这个方法是我发现使用嵌套元素的唯一方法，特别是那些由像Pivottable这样的库生成的方法（ https://github.com/nicolaskruchten/pivottable ）

Answer 4

 $(".deleteIcon").click(function(){ doActionA(); return false; }); 

Answer 5

按照JQuery文档中的指示使用.one（）。