将可用按钮添加到 .AppendTo - Jquery答案

【问题标题】：Adding a usable button to .AppendTo - Jquery将可用按钮添加到 .AppendTo - Jquery
【发布时间】：2012-05-20 21:05:43
【问题描述】：

基本上我已经创建了一个叠加层并将其作为“加载屏幕”加载到 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");
            });

});

【问题讨论】：

jQuery triggered newly added html code 的可能重复项
worksforme: jsfiddle.net/3HMcT
@samjudson：不，这是不同的。 #stop 将在调用 $('#stop').click(...) 以将处理程序绑定到它之前位于 DOM 中。
对不起，是的。尝试使用 $("#stop1") 代替，因为您将点击添加到 div，而不是按钮。
对不起，我错过了上面的示例，但经过反思，在我的 addButton 中包含更新功能可能是一个可行的解决方案。

标签： javascript jquery web

【解决方案1】：

是的，你也可以这样做。请参阅docs for the on() method。

$(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 操作。

【讨论】：

【解决方案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");
    });
});

【讨论】：

@Bergi 是的，我注意到了！不，我没有复制你的代码，只是写了几乎一样的东西？
我知道你不可能复制它，但我真的认为它会完全一样 :-) 刚刚开始意识到这些细微的差别...... +1 用于双重使用 .on( )

【解决方案3】：

使用.live()，这样新创建的任何东西仍将获得click 事件。
http://jsfiddle.net/DerekL/2GCfD/

【讨论】：

Live 被“on”取代