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

Question

有没有办法只让内在的元素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 ");

Answer 1

livejQuery中的方法通过事件委托来工作,事件委托是将所有冒泡事件从单个元素捕获到共同祖先(在您的情况下是其中document)的行为.

停止click事件的传播/冒泡发生在处理程序元素(它是共同的祖先,而不是元素本身)上,并且存在于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()
  );
});