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

发布于 2024-08-22 06:25:56 字数 681 浏览 5 评论 0原文

有没有办法只让 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 ");

原文

Is there is a way to only let the inner element of a listitem
do something?

I have list elements that can contain a tags with a certain class.

The inner a tags are bound to a live click event handler. The list items themselves have also a click event handler.

Something like this

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

with the handler for the a tags

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

and this is how the event for li item is added

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦浮鱼 2024-08-29 06:25:56

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

The live method in jQuery works via event delegation, which is the act of catching all the bubbled events from individual elements onto a common ancestor (in your case its document).

Stopping the propagation/bubbling of the click event occurs on the handler element (which is the common ancestor, not on the element itself) and exists way above the li that you are trying to avoid.

So by the time the stopPropagation method gets called, we've already traversed down the dom and passed the li element.

It's essentially putting a stop sign 200ft after the intersection.

So you'll either need to use bind and stopPropagation or find a different solution.

Here is an example of what I'm talking about: http://jsbin.com/ibuxo (check the console)

you can see the code or edit it at http://jsbin.com/ibuxo/edit

My suggested solution to this problem would be to use bind instead of live.

This requires you to do a little bit extra work, but it's not so bad.

You are probably using live because you are adding new elements, and you want them to have the same functionality. You should do this by binding them when you input them to the page. Here's an example

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

回复收藏 0 原文

林空鹿饮溪 2024-08-29 06:25:56

作者的解决方案：

我添加了上面的所有 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);

这是一个解释事件冒泡的有趣页面：如何停止事件冒泡jquery 实时吗？

Solution from Author:

I added all the a tags like above, so no mixup with live anymore.

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

Here is an interesting page to explain event bubbling: How to stop event bubbling with jquery live?

回复收藏 0 原文