Question

我简化了HTML和Javascript。

HTML结构

ul -> li -> a

javascript

var $ul = $('#the-list');

$ul.find('a').click(function(e){
    e.stopImmediatePropagation();
    console.debug('a');
});

$ul.unbind('click').click(function(){
    console.debug('ul');
});

问题

第一次点击链接时，一切正常。但是在使用$ul.html(newHtml)更新列表内容并再次运行上面的代码之后，首先调用$ ul上的事件。

第一次：

一个
停在那里

第二次：

UL
一个

会导致这种行为的原因是什么？请原谅这个问题的反向结构

Answer 1

如果您要删除ul的内容，则不应将事件侦听器绑定到内容;相反，将单击侦听器绑定到ul本身，您可以在一个侦听器中监听ul及其子节点上的单击事件。这称为事件委托。

$ul.click(function (e) {
    var $target = $(e.target);
    console.log($target);
});

如果您想专门收听ul上的点击事件及其中包含的主要元素，您可以使用$.live()：

$ul.add($ul.find('a')).live('click', function (e) {
    console.log(e.target);
});

应该为您提供所需的点击事件。我不是100％肯定这一点，因为.add可能会改变一些事情，但那是基本的想法。现在测试一下。

jQuery传播顺序怪异

1 个答案: