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 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;
});

Answer 2

您可以使用

之类的选择器

$（“li p”）。click（function（）{
警告（“点击里面的李”）;
}）

这是Demo

Answer 3

如果您已经收到两个事件，则在每个点击处理程序中调用event.stopPropagation()将阻止另一个事件被调用。

更简单的方法是向#myid添加一个单击处理程序，然后检查event.target属性以决定如何处理它。

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

3 个答案: