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

Question

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

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

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

类似这样的事情

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

使用 a 标记的处理程序

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

这就是添加 li item 事件的方式

$(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 ");

Answer 1

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

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

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

它实质上是在十字路口后 200 英尺处放置一个 parking 标志。

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

以下是我正在讨论的示例:http://jsbin.com/ibuxo (检查控制台)

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

我建议的解决方案是使用 bind 而不是 live。

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

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

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