Question

我遇到了阻止使用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()时它不起作用？？

Answer 1

待办事项＆＃39; H！我找到了 - 它是在代码中我没有发布，抱歉。

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

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

由于父亲的click处理程序在孩子之前被调用，当我点击该链接时，.spoiler类正从父母中删除...同时删除了孩子的click绑定！

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

另外，我很乐意就如何最好地处理这种情况提出建议......

为什么我对on（）（或live（））的调用不能使用append（）添加的元素？

1 个答案: