javascript - 附加的 ahref 不会在单击时启动功能

Question

我有以下情况，我真的不知道为什么它不会触发：

$('.tab3').click(function() {
               //console.log("test");
               $('.coda-nav').append('<a href="#" style="position: relative;" id="ref1">blabla</a>');
               $('.coda-nav').append('<a href="#" style="position: relative;" id="ref2">blabla</a>');
               $('.coda-nav').append('<a href="#" style="position: relative;" id="ref3">blabla</a>');
            });

这很好用。如果我点击 tab3 它会附加 3 个链接！然后：

$('#ref2').click(function() {
        console.log("test");
    });

请告诉我为什么在 ref2 上什么也没发生！

谢谢泰德

Answer 1

因为锚点是在绑定事件后添加的click，即绑定事件时元素不存在。

您可以使用事件委托来修复它：

$(".coda-nav").on("click", "#ref2", function() {
    console.log("test");
});

Answer 2

看看：http ://api.jquery.com/on/

您的click处理程序不会附加到新创建的<a>. 您需要On即时附加它。

所以会变成：

$(".coda-nav").on("click", "#ref2", function() {
    console.log("test");
});