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

有没有办法只让listitem的内部元素做某事?

我有列表元素,可以包含具有某个类a标签。

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

像这样的东西

 
  • some textsome text
  • 使用a标签的处理程序

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

    这就是如何添加li项目的事件

     $(markers).each(function(i,marker){ $("
  • ") .html("Locatie "+''+ids[i]+'') .click(function(e){ showLocation(marker, i); }) .appendTo("#somelist ");
  • jQuery中的live方法通过事件委托来工作,事件委托是将所有冒泡事件从各个元素捕获到一个共同的祖先(在你的情况下是它的document )。

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

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

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

    所以你要么需要使用bindstopPropagation要么找到不同的解决方案。

    这是我正在谈论的一个例子: http : //jsbin.com/ibuxo (检查控制台)

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

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

    这需要你做一些额外的工作,但这并不是那么糟糕。

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

     $(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 $('
  • hi
  • ').find('a').click(myAnchorHandler).parent() ); });

    作者的解决方案:

    我添加了上面的所有标签,所以不再与live进行混音。

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

    这是一个有趣的页面来解释事件冒泡: 如何使用jquery live停止事件冒泡?

    标签的处理程序返回false。