Question

任何人都可以解释一下，为什么没有触发点击事件，当一个元素从变量中插入dom时

考虑

HTML

<div id="disp"></div>
<input type="button" value="clickme" id="cme"/>

的jQuery

$("#cme").click(function(){
    var inside = '<input type="button" value="clickme again" id="sme"/>';
    $("#disp").html(inside);
});

$("#sme").click(function(){
    alert("clicked me");  
});

当您点击clickme按钮时，clickme again内添加了新按钮disp，点击clickme again按钮时，它不会触发附加到其上的点击事件。它没有警报点击了我？为什么？

但是当我尝试这种方式时，它可以正常工作

$("#cme").click(function(){
    var inside = '<input type="button" value="clickme again" id="sme"/>';
    $("#disp").html(inside);
    // when i put here , it works
    $("#sme").click(function(){
        alert("clicked me");  
    });
});

我想将$("#sme").click放在外面。任何帮助是极大的赞赏。感谢

Answer 1

您需要使用Event Delegation

使用.on()

$("#disp").on('click', "#sme", function(){
    //Your code
    alert("clicked me"); 
});

Answer 2

尝试这样的事情

$("#disp").on('click', "#sme", function(){
    alert("clicked me"); 
});

原因

您正在DOM中不存在的元素上应用click事件。所以使用on() jQuery函数

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

当元素从js变量插入dom时，不会触发click事件

2 个答案: