JQuery追加点击

JQuery append click

本文关键字：追加 JQuery      更新时间：2023-09-26

我有一个奇怪的问题与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/

.box元素是动态追加的，所以您需要使用委托事件:

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

更新小提琴

这看起来像是一个事件委托问题。在lv1期间创建的新盒子上，您不能再次分配事件处理程序。

试

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

查看代码:-

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

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

谢谢

相关文章：