jquery识别是单击了li还是单击了li中的p

Question

<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(){

提前致谢

Answer 1

这是事件冒泡的问题.您可以使用获取当前单击的元素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.

如果要为将来的元素附加click事件,请使用.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;
});