javascript - 附加到 DOM 后 anchor 链接上没有点击事件

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 事件，并在event 中找到选择器时触发您的代码。 .