添加一个可用的按钮到.AppendTo - Jquery

Question

基本上我已经创建了一个叠加层并将其加载到appendTo作为“加载屏幕”。

最近，我需要在叠加层上添加一个停止按钮，这不是问题，但是jquery .click函数没有拿起按钮点击，我已经尝试保留现有按钮，因此它可能会注册，但是可悲的是没有。

（我也尝试过使用Id作为按钮。

下面是一些演示问题的测试代码。

$(document).ready(function(){
    $("#addButton").click( function () {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
        $("#stop").click( function() {
            alert("working");
        });
    });

编辑：

只是为了澄清，这是我最初想要的，但是由于“过度改变”，上面的例子将在我的场景中起作用，这只是为了清晰起见的原始问题。

    $(document).ready(function(){
        $("#addButton").click( function () {
            $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
            $overlay.appendTo(document.body);

        });

$("#stop").click( function() {
                alert("working");
            });

});

Answer 1

是的，你也可以这样做。 请参阅on()方法的文档 。

$(document).ready(function(){
    $("#addButton").click( function () {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
    });

    $(document).on("click", "#stop", function() {
        alert("working");
    });
});

这只会向文档添加一个单击侦听器，每次单击事件从#stop元素冒泡时都会触发该单击侦听器。 但是，这通常只需要很多元素，因此当有多个这样的按钮时，最好使用“ stop ”类。

但是，我想你需要在第一个例子中使用闭包来执行正确的onclick-actions。

Answer 2

$(document).ready(function(){
    $("#addButton").on('click', function() {
        $overlay = $("<div id='overlay'><div id='contain'><h3 style='color:#FFF'>Processing, just a moment</h3> <div id='stop'><button type='button' class='btn btn-primary' id='stop1' >Stop</button></div><div class='bar' style='width: 80%; padding-top:50%'></div></div></div");
        $overlay.appendTo(document.body);
    });

    $(document).on('click', '#stop', function() {
        alert("working");
    });
});

Answer 3

使用.live()以便新创建的任何内容仍然会获得click事件。
http://jsfiddle.net/DerekL/2GCfD/

它现在正在运作。