javascript - JQuery 追加点击

Question

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

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 元素是动态附加的，因此您需要使用委托(delegate)事件:

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

Updated fiddle