Question

我的页面有一个按钮，单击该按钮时，将在该页面上创建另一个按钮，该按钮将在单击时触发警告框。虽然，似乎DOM忽略了点击事件。有人可以解释一下吗？感谢。

<div class="myDiv"></div>

点击我！

$("#btnSub").on("click", function(){
$('<p>This will append to myDiv</p><br><button id="btnAfter">After button</button>').appendTo(".myDiv");
$('#btnSub').remove();

}）;

$("#btnAfter").on('click', function(){
    alert("test");
});

JSFiddle：http://jsfiddle.net/jpavlov/fbojv76t/

Answer 1

您需要事件委派才能将事件附加到动态添加的元素。

$(".myDiv").on('click','#btnAfter', function(){
  alert("test");
});

Answer 2

尝试使用jQuery()在创建jQuery对象时添加click事件，.add()

＆＃13;

$("#btnSub").on("click", function () {
    var button = $("<button />", {
        id: "btnAfter",
        html: "After button",
        on: {
            "click": function () {
                alert("test");
            }
        }
    });
    $("<p>This will append to myDiv</p><br>")
    .add(button)
    .appendTo(".myDiv");
    $("#btnSub").remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="myDiv"></div>
<br>
<button id="btnSub">Click Me!</button>

＆＃13;

Answer 3

这是因为添加事件处理程序时按钮#btnAfter不存在。

在这种情况下，您应该使用委派的事件处理程序。您将事件处理程序放在现有父级（'.myDiv'）上，并提供选择器作为第二个参数（'#btnAfter'）。

在你的小提琴中试试这个：

$(".myDiv").on('click','#btnAfter', function(){
   alert("test");
});

jQuert documentation for on() - Direct and Delegated events

添加到DOM后，Jquery按钮不会触发

3 个答案: