javascript - jQuery传播顺序怪异

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 上的事件。

第一次：

1. 一个
2. 停在那里

第二次：

1. ul
2. 一个

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

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可能会改变一些事情，但这是基本的想法。现在测试这个。