0

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

});
4

3 回答 3

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然而，这通常只对许多元素需要，所以当有多个这样的按钮时，你最好使用一个类“ ”。

然而，我想您将需要在第一个示例中使用的闭包来执行正确的点击操作。

于 2012-05-20T21:52:00.030 回答
1 
$(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");
    });
});
于 2012-05-20T21:52:08.740 回答
0

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

在此处输入图像描述

　　　　　　　　　　　　　　　　　　 它现在正在工作。

于 2012-05-20T21:57:30.480 回答