<ul id='myid'>
<li id='1'> my text 1 <p id='1' >inside p1 clicked</p></li>
<li id='2'> my text 2 <p id='1' >inside p2 clicked</p></li>
<li id='3'> my text 3 <p id='1' >inside p3 clicked</p></li>
<li id='4'> my text 4 <p id='1' >inside p4 clicked</p></li>
<li id='5'> my text 5 <p id='1' >inside p5 clicked</p></li>
</ul>
嗨,我只是想知道如果点击“我的文字1”如何提醒,如果点击“在p1点击内部”,如何提醒。因为每当我尝试点击“我的text1”时它就会起作用。但是当我尝试点击“内部p1点击”时,它带有两个警报,一个带有“my text 1”,另一个带有“内部p1点击”。请帮助解决方案。
下面是我使用的代码。
$(“#myid”)。delegate('p','click',function(){
提前致谢
答案 0 :(得分:5)
这是event bubbling的问题。您可以使用event.target
获取当前点击的元素。
如果您想停止事件冒泡,可以使用event.stopPropagation
// click event for li
$("#myid li").click(function(){
alert("li clicked");
});
// click event for p
$("#myid li p").click(function(e){
alert("p clicked");
// stop event bubbling
e.stopPropagation();
});
你的HTML也无效。切勿使用数字启动id。
如果您想为将来的元素添加点击事件,请使用.live
或.delegate
。
并将return false
代替e.stopPropagation
。
// click event for li
$("#myid li").live("click", function(){
alert("li clicked");
});
// click event for p
$("#myid li p").live("click", function(){
alert("p clicked");
// stop event bubbling
return false;
});
答案 1 :(得分:1)
答案 2 :(得分:1)
如果您已经收到两个事件,则在每个点击处理程序中调用event.stopPropagation()
将阻止另一个事件被调用。
更简单的方法是向#myid添加一个单击处理程序,然后检查event.target属性以决定如何处理它。