javascript - jQuery 函数不适用于附加的 html

Question

我想用 jQuery 附加一个 div，然后在附加的 div 内的一个类上使用 jQuery click 函数。这是我的代码，如果我附加 div，它就不起作用，但是如果 div 已经存在于 html 中，它就可以正常工作。

HTML：

<div class="add">
    Add item
</div>

<div class="container">
</div>

jQuery：

$('.add').click(function(e){
    e.preventDefault();

    var box = '<div class="box"><div class="remove">x</div></div>'
    $('.container').append(box)
});


$('.remove').click(function(){
    alert("remove");
});

演示：

http://jsfiddle.net/Y625A/

Answer 1

使用事件委托

$('.container').on('click','.remove',function(){
    alert("remove");
});

演示--> http://jsfiddle.net/Y625A/2/

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 2

尝试使用live绑定事件，这将在创建新项目时绑定它们：

$('.add').live('click', function(e){

});

Answer 3

即使创建了元素，也必须绑定单击：

$('.add').click(function(e){
    e.preventDefault();

    var box = "<div class='box'><div class='remove'>x</div></div>"
    $('.container').append(box)

$('.remove').click(function(){
    alert("remove");
});


});

http://jsbin.com/ofoteq/1/edit