Question

任何人都可以解释为什么当我添加偶数个方块时，绑定事件将不再起作用了吗？

$("#add").click(function(){
    $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) {
            $(e.target).toggleClass( "change" );
        });
    });

http://jsfiddle.net/8W4JB/

Answer 1

使用事件委托。

写：

$("#add").click(function () {
    $("#container").append("<div class=\"square\">xxxxxx</div> ");
});
$("#container").on("click", ".square", function (e) {
    $(this).toggleClass("change");
});

Updated fiddle here.

More information here.

Answer 2

试试这个

http://jsfiddle.net/8W4JB/3/

$(document).on("click",".square",function(e) {
       $(e.target).toggleClass( "change" );
});

Answer 3

fiddle Demo

没有事件委派。

将click事件直接绑定到要添加的对象。

$("#add").click(function () {
    var add =$("<div class=\"square\">xxxxxx</div>"); //make a jquery object of the element to added
    add.click(function(){ //attach click event to it
         $(this).toggleClass("change"); // toggleClass here
    }).appendTo('#container'); //append it to element with id container
});

.appendTo()

附加后，活动绑定不起作用

3 个答案: