События Jquery для элементов управления, созданных после загрузки страницы

Question

У меня есть TextBoxes класса, а при нажатии кнопки я добавляю другой элемент того же класса.

Как я могу сделать так, чтобы новый TextBox вел себя как остальная часть своего класса?

Пример: http://jsfiddle.net/GCQKE/

HTML:

<div class="container"> 
    <input id="textbox1" type="text" class="textbox" /> 
    <input id="textbox2" type="text" class="textbox" /> 
    <input id="textbox4" type="text" class="textbox" /> 
</div> 
<input type="button" class="append" value="Append new TextBox" /> 

Jquery

$(".append").click(function (e) { 
    $(".container").append("<input id='textbox3' type='text' class='textbox' />"); 
}); 


$(".textbox").click(function (e) { 
    alert($(e.target).attr("id")); 
}); 

Когда я нажимаю все текстовые поля, я получаю предупреждение, кроме арматуры для одной генерируемой на кнопку мыши , Любое предложение?

Answer 1

DEMO (jsfiddle updated)

Вы должны сделать это, используя правильный синтаксис для .on() для будущих элементов путем связывания события родителя, который существует в то время кода запуск и давая ему селектор детей, к которому вы действительно хотите привязать событие.

$('.container').on('click', '.textbox', function() { 
    //alert($(this).attr("id")); 
    console.log(this.id); 
}); 

Answer 2

ваш .click(...) будет связывать только с элементами, которые имеют этот класс на PageLoad,

, если вы хотите, чтобы связать функцию ко всем элементам класса в настоящее время или в будущем (в настоящее время на PageLoad или динамически вставленный), используемый делегат JQuery в ...

http://api.jquery.com/delegate/

заменить

$(".textbox").click(function (e) { 
    alert($(e.target).attr("id")); 
}); 

с

$('.container').delegate('.textbox', 'click', function(e){ 
    alert($(e.target).attr("id")); 
});