jQuery如何仅在内部元素上执行事件答案

【问题标题】：jQuery how to execute event only on the inner elementjQuery如何仅在内部元素上执行事件
【发布时间】：2010-02-23 19:52:49
【问题描述】：

有没有办法只让listitem的内部元素做点什么？

我的列表元素可以包含特定类的a 标签。

内部a 标记绑定到实时点击事件处理程序。列表项本身也有一个单击事件处理程序。

类似的东西

<li>some text<a class="someClassName">some text</a></li>

使用a 标签的处理程序

$('#somelist li a').live("click", function(e)

这就是为 li 项目添加事件的方式

$(markers).each(function(i,marker){
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){
          showLocation(marker, i);
    })
    .appendTo("#somelist ");

【问题讨论】：

您能发布更多代码吗？什么是动态附加的？ a 和 li?只是a？ li 的点击是使用bind() 而a 是使用live() 吗？
li 项是在开头动态添加的稍后单击复选框时，会在列表项中添加一个额外的 a 标记。我检查了 hasClass ，其中一个被点击了。我想我有一个绑定和一个现场活动然后
好吧，你是说，我应该使用 live 一致。我可以明确地尝试一下，也可以尝试@Alex 的解决方案。我可以稍后再回来验证一个或另一个或两者是否有效。感谢你们迄今为止提供的宝贵意见。
Alex 提供了一个出色解决方案的关键。请看他的回答。
你应该警惕使用'return false'。改用 e.preventDefault 或 e.stopPropogation

标签： jquery events binding live

【解决方案1】：

jQuery 中的live 方法通过事件委托工作，这是将来自单个元素的所有冒泡事件捕获到共同祖先（在您的情况下为document）的行为。

停止单击事件的传播/冒泡发生在处理程序元素（它是共同的祖先，而不是元素本身）上，并且存在于您试图避免的 li 之上。

所以当stopPropagation 方法被调用时，我们已经遍历了dom 并传递了li 元素。

它本质上是在交叉路口后 200 英尺处放置一个停车标志。

因此，您要么需要使用bind 和stopPropagation，要么找到不同的解决方案。

这是我所说的一个例子：http://jsbin.com/ibuxo（检查控制台）

您可以在http://jsbin.com/ibuxo/edit查看或编辑代码

我对这个问题的建议解决方案是使用bind 而不是live。

这需要你做一些额外的工作，但还不错。

您可能正在使用live，因为您正在添加新元素，并且希望它们具有相同的功能。您应该通过在将它们输入到页面时绑定它们来做到这一点。这是一个例子

$(function(){
  var myAnchorHandler = function(e){
    alert('clicked!');
    e.stopPropagation();
    return false;
  };

  // initial bind
  $('#somelist li a').click(myAnchorHandler);

  // code where you input more li elements to the list with links
  $('#somelist').append(
    // bind your function to the element now, and then append it
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent()
  );
});

【讨论】：

很好的解释，虽然我不完全理解术语。任何关于不同解决方案的想法都可能，我现在没有想法。
如果您愿意，我可以更详细地介绍它，但或多或少，如果您希望能够阻止 li 上发生的某些事情，您要么需要使用 @987654335 @ 来处理您的点击，或者您需要修改当前在 li 上的任何处理程序以忽略源自子锚元素的任何内容。
不，您不必详细说明，我可以阅读。现在，我对实用的解决方案更感兴趣。我可以在 li click 事件中做一些事情来识别我点击了子元素。我已经用 e.target 尝试了一些东西，但这只会给出 li 元素，对吧？
我添加了一个简单的示例来说明如何使用 bind，即使您正在向列表中添加新元素。
对不起，起初把评论放在错误的部分我现在不能这么快地评估，但是谢谢，如果这是解决方案。您还说我根本不需要在此设置中进行直播。如果这行得通，我会感到惊喜，因为页面外的内容是动态添加的，我一直认为您需要直播才能使其正常工作

【解决方案2】：

作者的解决方案：

我添加了上面所有的 a 标签，所以不再与 live 混淆了。

$(markers).each(function(i,marker){
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){
        showLocation(marker, i);
    })
    .appendTo("#somelist");
    $("<a />")
    .html("<strong>"+ids[i]+"</strong>")
    .addClass('ol id')
    .click(function(){
        $('#ginfo').show();
        return false;
    })
    .appendTo(listitem);

这是一个解释事件冒泡的有趣页面：How to stop event bubbling with jquery live?

【讨论】：

【解决方案3】：

让 <a> 标记的处理程序返回 false。

【讨论】：