Функция jQuery не работает над добавленным html

Question

Я хочу добавить div с jQuery, а затем использовать функцию jQuery click для класса, который находится внутри добавленного div. Вот мой код, он не работает, если я добавляю 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"); 
}); 

Demo -->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