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

创建元素后，您必须绑定click事件：

$('.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