jQuery的：点击嵌套元素

我有以下标记jQuery的：点击嵌套元素

<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的点击不会在点击图片时被解雇。有没有办法做到这一点？

来源

2013-01-08 Bilal Fazlani

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

来源

2013-01-08 06:28:35

这工作！谢谢！ –

您需要使用event.stopPropagation()来防止事件冒泡DOM树。

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

您删除图标绑定的事件在激发父事件与列表项绑定，所以你需要停止传播父事件，当孩子是事件的源头。

来源

2013-01-08 06:28:31 Adil

他想要阻止父母的单击事件对儿童点击时工作。你不觉得'child.stopPropagation（）'应该添加到孩子的点击？ –

事件绑定将使子对象不会触发父对象的事件。 – Adil

我认为它，看看这个：http://jsfiddle.net/arvind07/WtxLC/ 尝试评论'event.stopPropagation（）' –

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

来源

2013-01-08 06:30:31 Anujith

使用。一（），如指向JQuery的文档。

来源

2013-05-22 06:03:05 user2408157

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

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

来源

2015-08-05 16:37:15

jQuery的：点击嵌套元素

回答

相关问题