0

我遇到了一个问题，阻止使用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()应该绑定到与其选择器匹配的所有元素，即使是后来添加的元素？

[编辑] 如果我将代码放在onclick元素<a>中，它可以工作：

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

...

function doNothingWhenClicked()
{
    return false;
}

那么为什么在使用时它不起作用on()！？

4

1 回答 1

1

干！我找到了它——它是在我没有发布的代码中，抱歉。

在其他地方，我为divclick设置了一个处理程序，它删除了该类。.spoiler.spoiler

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

由于父click处理程序在子处理程序之前被调用，所以当我单击链接时，.spoiler该类正在从父处理程序中删除……这同时click从子处理程序中删除了绑定！

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

另外，我愿意接受有关如何最好地处理这种情况的建议......

于 2013-06-02T23:07:05.043 回答