Question

当我尝试单击超时函数内的append元素时，我遇到了一个奇怪的问题我得到了以下代码：

function generate(){
    box = shuffle(box);
    console.log(box);
    $("#game").empty();
    for (var i = 0; i < 4; i++) {
        $("#game").append("<div class=box>" + box[i] + "</div>");
    }
}

function lvl1(){
    box = shuffle(box);
    console.log(box);
    $("#game").empty();
    for (var i = 0; i < 4; i++) {
        $("#game").append("<div class=box>" + box[i] + "</div>");
    }
}

generate();

setTimeout(function(){
    lvl1();
}, 1000);

$(".box").click(function(){
    alert("OK");
});

如果我尝试在1秒内点击框，警报会正确显示，但如果我在超时后尝试点击它也没有任何错误显示

http://jsfiddle.net/f4kgvaL5/

Answer 1

.box元素是动态附加的，因此您需要使用委托事件：

$("#game").on('click', '.box', function () {
    alert("OK");
});

Updated fiddle

Answer 2

这看起来像是一个事件委托问题。在lvl1期间创建的新框中，您将再次分配事件处理程序。

尝试

$( "#game" ).on( "click", ".box", function(){
    alert("OK");
});

Answer 3

见代码： -

 $(document).on("click",".box",function(){
            alert("OK");
 });

工作示例： - http://jsfiddle.net/f4kgvaL5/2/

感谢

JQuery追加点击

3 个答案: