jQuery обрабатывает события на динамически добавленных элементах - PullRequest
Новая
       18

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

3 голосов
/ 05 января 2011

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

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

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 и т. Д.) Для количества полей, которые добавляются?

Любые предложения приветствуются.

РЕДАКТИРОВАТЬ: Некоторые HTML-коды для отображения переключателей над выпадающими списками [категория] [подкатегория] [модель].Это для пользователя, чтобы выбрать, будет ли это возврат или обмен. 

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

Ответы [ 3 ]

2 голосов
/ 05 января 2011

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

$("#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());
});
0 голосов
/ 05 января 2011

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

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      
});
0 голосов
/ 05 января 2011

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

<input class="cat3 eventClass" />

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

...