为什么我对on()(或live())的调用不能处理使用append()添加的元素?

Why doesn't my call to on() (or live()) work with elements added using append()?

本文关键字：append 添加 元素 处理 不能 live 调用 为什么 on      更新时间：2023-09-26

我有一个问题，防止使用on()点击超链接。我研究了Stackoverflow，但还没有找到答案。

代码如下:

$(document).ready(function() {
    $(document).on('click', '.spoiler > a', function(e)
    {
        e.preventDefault();
        return false;
    });
});

然后，像这样添加一个链接:

$("#chatContainer").append("<div class='spoiler'><a href='blah'>lorem ipsum</a></div>");

但是当我点击链接时，链接仍然被跟随。我已经确认这是因为click处理程序根本没有被调用。我也确认了$(document).ready()函数被调用，并且$('.spoiler > a')正确地选择了添加后的<a>元素。

那么，为什么不工作!?是不是on()应该绑定到匹配其选择器的所有元素，甚至是后来添加的?

[Edit]如果我把代码放在<a>元素的onclick中，它可以工作:

$("#chatContainer").append("<div class='spoiler'><a href='blah' onclick='return doNothingWhenClicked();'>lorem ipsum</a></div>");
...
function doNothingWhenClicked()
{
    return false;
}

那么为什么在使用on() !时不起作用呢?

不要!我发现了它——它是在我没有发布的代码中，对不起。

在其他地方，我为.spoilerdiv设置了click处理程序，它删除了.spoiler类。

$('.spoiler').on('click', function(e)
{
    $(this).removeClass('.spoiler');
});

由于父类的click处理程序在子类之前被调用，当我点击链接时，.spoiler类被从父类中删除…这同时从子进程中删除了click绑定!

通常我会删除这个问题，但由于我认为这是一个相当棘手的错误，我将把这个问题/答案留在这里，以防将来它对其他人有所帮助。

同时，我愿意听取关于如何最好地处理这种情况的建议。

相关文章：