jquery - click() 函数中的 click() 函数不起作用

Question

问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？

HTML:

<span id='delaccspan'>
<button class='defbutt' id='delaccbut'>Delete my account</button>
</span>

jQuery:

$(document).ready(function(){
    $("#delaccbut").click(function(){
        $("#delaccspan").html("All your posts, pictures, followers and everything you did on this page will be deleted. Do you want to continue? <button class='smallbut' id='confdel'>Yes</button> <button class='smallbut' id='redel'>No</button>");
    });
    $("#confdel").click(function(){
        $("#delaccspan").html("Okay");
    });
    $("#redel").click(function(){
        $("#delaccspan").html("Good decision!");
    });
});

这里出了什么问题？谢谢!

Answer 1

脚本初始化时，"is"和“否”按钮不存在。您需要将事件委托(delegate)给父级，以便可以将其应用于特定的子级，无论它们现在还是将来存在。

参见:http://learn.jquery.com/events/event-delegation/

$(function(){
    $("#delaccbut").click(function(){
        $("#delaccspan").html("All your posts, pictures, followers and everything you did on this page will be deleted. Do you want to continue? <button class='smallbut' id='confdel'>Yes</button> <button class='smallbut' id='redel'>No</button>");
    });

    $("body").on("click", "#confdel", function(){
        $("#delaccspan").html("Okay");
    });

    $("body").on("click", "#redel", function(){
        $("#delaccspan").html("Good decision!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='delaccspan'>
<button class='defbutt' id='delaccbut'>Delete my account</button>
</span>