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

是的，你也可以这样做。请参阅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-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/

enter image description here

现在正在运作。

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

3 个答案: