Question

我在向DOM添加链接时遇到问题。添加链接后，该元素不会触发任何点击事件。

我把这个jsFiddle放在一起演示：https://jsfiddle.net/7w1djh9s/

代码：

$(function() {
    $(".add-question").click(function() {
        var html = "<li><a href=\"#\">Question " + ($("#questions li").length + 1) + "</a></li>"
        $("#questions").append(html);
    });

    $("#questions a").click(function() {
        alert(1);
    });
});

如果单击“问题1”链接，则会触发onclick。如果添加新问题，然后单击新链接，则不会触发任何内容。

为什么会这样？

Answer 1

使用（如果#questions动态附加，显然不是

$(document).on('click', '{target selector}', function(e) {
   e.preventDefault() // depending on tag
   // code
});

或（在您的情况下）

$('#questions').on('click', 'a', function(e) {
   e.preventDefault() // depending on tag
   // code
});

这将跟踪click上的document个事件，并会在event中找到选择器时触发您的代码。

Answer 2

你应该用这个：

$("#questions").on('click','a',function() {
    alert(1);
});

从jQuery检查on函数，如果HTML被更改，这将绑定事件。

附加到DOM后，锚链接上没有单击事件

2 个答案: