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（＆＃39; #linked＆＃39;）。在第二个中，我直接访问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元素，当事件处理程序看到事件时，它会查看它起源于哪个元素以查看它是否匹配{{ 1}}。这允许"#linked"内容来来去去或稍后创建，而不会影响事件处理程序。

因此，在处理您希望启用事件处理程序的动态插入内容时，您有几个选项：

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

您可以阅读有关委派事件处理的更多信息，了解有关此主题的其他帖子：

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?

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

1 个答案: