javascript - 当我通过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');

    });

});

score 3 · Accepted Answer

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

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

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

像这样的事件处理程序：

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

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

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