jQuery обработки событий на динамически добавленных элементах

Question

У меня есть форма RMA, которую я могу динамически добавлять в поля, но имею проблему с возможностью обработки событий (например, щелчок, изменение).

Я добавляю поля с помощью .appendTo("#container"); и увеличивая параметр NAME с помощью счетчика, так что, когда пользователь нажимает «Отправить», я получу «Категория1: бла» «Категория2: бла-бла» 'Категория3: something_else 'и т. д.

Проблема заключается в том, что я добавляю больше полей (например, раскрывающийся список) динамически, события не следуют. У меня 3 drop downs [category] [subcategory] [model]. Когда я выбираю категорию:

jQuery('#cat').bind("change", function() 
    { 
     jQuery('#subcat').empty(); 
     jQuery('#subcat').attr('disabled', 'disabled'); 
     jQuery('#model').empty(); 
     jQuery('#model').attr('disabled', 'disabled'); 

     LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat 

    }); 

В приведенном выше коде, я попытался добавить jQuery('#cat'+counter).bind("change", function() { ..., но я думаю, что это событие будет стрелять только если изменить [категория] и одновременно нажать кнопку Добавить.

Я попытался с помощью .live, но я не знаю, как заставить его работать с добавлением элементов с различными параметрами класс/имя (CAT2, CAT3, cat4, cat5 ...)

бы мне нужен отдельный функции также? (LoadSeries2, LoadSeries3 и т. Д.) Для количества добавленных полей?

Любые предложения оценены.

EDIT: Некоторые из HTML-кода для отображения радиокнопок над выпадающими списками [category] [subcategory] [model]. Это для пользователя, чтобы выбрать, будет ли он возвратом или обменом.

newTextBoxDiv.after().html(' 
    <div class="item'+counter+'"><br/> 
    <table width="820" border=1 cellspacing="0" cellpadding="0" align="center" style="border: 1px; border-color: #000;"> 
     <tr> 
     <td> 
      <div align="center" style="font-size: 14px;"> 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Return" selected="selected">Return 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div> 
... 

Answer 1

вы можете использовать метод live() или в вашем случае метод delegate() может быть лучше. В сочетании с starts-with selector (^=), вы должны быть хорошо идти ...

$("#container").delegate("[id^='cat']", "change", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 

---

JQuery с использованием on

$("#container").on("change", "[id^='cat']", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 

Answer 2

Я хотел бы использовать дополнительный класс специально для предметов, которые должны быть связанные с этим событием и т. д.

<input class="cat3 eventClass" /> 

Тогда просто мы е .live() связать любые существующие или будущие $('.eventClass') элементы мероприятия

Answer 3

Вы можете использовать начинается с выбора наряду с живой Попробуйте это:

jQuery('[id^=cat]').live("change", function() 
{ 
    var $this = $(this); 
    var id = this.id.replace(/[^0-9]/, ""); 
    jQuery('#subcat' + id).empty(); 
    jQuery('#subcat' + id).attr('disabled', 'disabled'); 
    jQuery('#model' + id).empty(); 
    jQuery('#model' + id).attr('disabled', 'disabled'); 
    LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat  
});