Функция Jquery .change () не работает с динамически заполненным списком SELECT

Question

У меня есть поле выбора, которое динамически заполняется вызовом ajax, который просто возвращает все опции выбора HTML. Вот часть PHP, которая просто отображает теги select и динамически заполняет каждую опцию / значение.

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}  

После того, как этот список заполнен, я пытаюсь вызвать событие изменения, чтобы при каждом изменении параметра по умолчанию в списке SELECT или в текстовом поле с тем же классом отключалась кнопка-переключатель, установленная в другой части. формы. (Вы можете увидеть первоначальный вопрос, который я задал, чтобы эта часть функционала работала здесь )

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

По какой-то причине, даже если я присваиваю полю выбора правильное имя класса (аффектор), когда я выбираю другие параметры в этом поле, другие части формы не отключаются. Статическое текстовое поле с тем же классом работает нормально. Я в тупике.

Есть идеи?

Answer 1

Только что прокомментировал ваш последний вопрос ... Вот что я сказал:

Использовать jQuery bind

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
} 

Вызовите addSelectChange в вашей функции успеха ajax. Это должно сделать свое дело. Взгляните также на живое событие jQuery (когда вы хотите установить события для всех текущих и будущих элементов DOM в более позднем проекте или что-то в этом роде). К сожалению, событие изменения и некоторые другие еще не поддерживаются вживую. Привязка - следующая лучшая вещь

Answer 2

_{Более актуальный ответ ..}

Поскольку элементы заполняются динамически, вы ищете делегирование события .

Не используйте .live() / .bind() / .delegate(). Вы должны использовать .on().

Согласно документации jQuery API :

Начиная с jQuery 1.7, метод .on() является предпочтительным методом для прикрепления обработчиков событий к документу. В более ранних версиях метод .bind() используется для непосредственного присоединения обработчика событий к элементам. Обработчики присоединяются к текущим выбранным элементам в объекте jQuery, поэтому эти элементы должны существовать в точке, где происходит вызов .bind(). Для более гибкой привязки событий см. Обсуждение делегирования событий в .on().

Поэтому вы бы использовали что-то вроде этого:

$(document).on('change', 'select', function (e) {
    /* ... */
});

Answer 3

Пример использования .live ()

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );

Answer 4

Для элементов, которые динамически вставляются в DOM, их события должны быть связаны с

$('.selector').bind('change',function() { doWork() });

Это потому, что когда вы запускаете $(function(){}); и связываете события, используя $.click или $.change и т. Д., Вы привязываете события к элементам , уже существующим в DOM . Любая манипуляция, которую вы делаете после этого, не зависит от того, что происходит в вызове $(function(){});. $.bind говорит вашей странице искать будущие элементы в вашем селекторе, а также текущие.

Answer 5

Я нашел решение сделать только

<select id="myselect"></select> 

в файле php / html, а затем сгенерируйте параметры для него с помощью ajax:

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

В options_generator.php только параметры эха:

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";

Answer 6

попробуй .live: http://docs.jquery.com/Events/live

Из документов: Связывает обработчик с событием (например, щелчком) для всех текущих и будущих элементов. Может также связывать пользовательские события.

Answer 7

Вместо этого используйте функцию делегата (). Подробнее об этом здесь http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/