Question

我有以下标记

<ol>
    <li class="ListItem">
        <span class="sub">@qItem.CategoryText</span>
        <input type="image" src="http://icons.iconarchive.com/icons/tatice/just-bins/256/bin-red-full-icon.png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" />
    </li>
</ol>

和以下脚本

$(".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();    
});

使用“删除”图标绑定的事件正在触发与ListItem的父事件绑定，因此当子项是事件源时，您需要停止父事件的传播。

Answer 3

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

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

Answer 4

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

Answer 5

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

jQuery：单击嵌套元素

5 个答案: