当我通过ID直接访问它时，不会触发点击jquery

Question

我正在使用dust.js（由于缺乏良好的文档而进行了多次谷歌搜索）。最后，我能够动态创建超链接。现在我想为动态生成的超链接提供 onclick 功能。

function createLink(){

    // register the template loading method with dust now
    var compiled = dust.compile("Hello <a href='#' id='linked'>{name}</a>!", "intro");
    dust.loadSource(compiled);

    dust.render("intro", {name: "Fred"}, function(err, out) {
        console.log(out);
        $("#displayHelloSection").html(out);
    });

}

下面是我准备好的文件。奇怪的是，当我点击生成的超链接时，我得到的是 Apple，而不是 Orange。我很想知道为什么第二个 onclick 不起作用？不同之处在于，在第一个中，我使用文档来引用我的 id（'#linked'）。在第二个中，我直接访问 id。

$(document).ready(function() {


    $(document).on('click','#linked',function(e){

     alert("Apple");

    });

    $('#linked').on('click', function() {

       alert('Orange');

    });

});

Answer 1

这样指定的事件处理程序：

$('#linked').on('click', function() {

尝试在运行此代码时将自己附加到"#linked" 对象。如果在这行代码运行时对象不存在，则不会创建事件处理程序。

这样的事件处理程序：

 $(document).on('click','#linked',function(e){

是委托的事件处理程序。事件处理程序附加到始终存在的document 元素，因此可以随时附加它。然后，它依赖于事件传播，将实际上源自其他元素的事件冒泡到document 元素，当事件处理程序看到该事件时，它会查看它源自哪个元素，看是否与"#linked" 匹配。这允许"#linked" 内容来来去去或稍后创建，而不会影响事件处理程序。

---

因此，在处理需要事件处理程序的动态插入内容时，您有几个选择：

1. 您可以将内容插入 DOM，然后附加事件处理程序。
2. 您可以使用委托事件处理，将事件处理程序附加到静态父对象，并使用.on() 的委托形式指定您希望它动态查找的子选择器。

您可以阅读有关此主题的其他帖子以获取有关委托事件处理的更多信息：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

Why not take Javascript event delegation to the extreme?