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

У меня есть поле выбора, которое динамически заполняется вызовом 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);
});

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

Любые идеи?

Ответы

Ответ 1

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

Использовать привязку jQuery

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

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

Ответ 2

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

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

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

В соответствии с jQuery API docs:

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

<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>";