Функция 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);
});

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

Любые идеи?


jquery onchange select dynamically-generated
person tresstylez    schedule 09.01.2010    source источник
comment
Быстрый совет: вместо echo "<option value='".$value."'>" попробуйте: echo "<option value='$value'>". Если вы обращаетесь к массиву, вы можете сделать echo "<option value='{$values[0]}'>"   -  person Skilldrick    schedule 09.01.2010

Ответы (7)


arrow_upward
20
arrow_downward

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

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

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

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

person munch    schedule 09.01.2010

arrow_upward
8
arrow_downward

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

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

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

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

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

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

$(document).on('change', 'select', function (e) {
    /* ... */
});
person Josh Crozier    schedule 05.01.2015
comment
да, это для всех сценариев, статического или динамического контента :) - person user889030; 14.03.2017

arrow_upward
5
arrow_downward

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

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );
person Tapefreak    schedule 29.08.2011
comment
Этот .live() всегда работает для меня в динамически заполняемом поле выбора. - person arslaan ejaz; 24.11.2012
comment
.live() теперь устарел. Используйте что-то вроде $(document).on("change",'#my_form_id select[name^="my_select_name"]', function() { ... }) - person Seybsen; 13.02.2013

arrow_upward
3
arrow_downward

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

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

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

person Jason    schedule 09.01.2010
comment
И .change, и .bind работают одинаково. Они будут привязаны только к элементам, которые в данный момент находятся в DOM. - person Anurag; 09.01.2010
comment
@anurag - неверно. если оба элемента уже находятся в DOM, да, они работают одинаково. но .change не будет связывать новые элементы в DOM (по этой причине ОП задает вопрос...), .bind будет связывать текущие и будущие события с элементами. - person Jason; 09.01.2010
comment
@Jason: Проверить не так сложно. Посмотрите на этот небольшой html-фрагмент (slexy.org/raw/s2XA8QihVm) Я написал, чтобы проверить, работает ли bind для будущих элементов dom, и это не так. Также это взято из источника jQuery, оно в основном перенаправляет вызовы функций для change(), mouseover(), blur() и т. д. на bind(). Вот небольшой фрагмент из исходного кода jQuery, показывающий, что - slexy.org/view/s206rDeFeO или вы можете увидеть весь исходный код на самом code.jQuery.com — code.jquery.com/jquery-latest.js< /а>. А live() — это функция, которая привязывается как к текущим, так и к будущим событиям. - person Anurag; 09.01.2010

arrow_upward
1
arrow_downward

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

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

person brian chandley    schedule 09.01.2010
comment
В настоящее время не поддерживается: ...изменить... - person Sampson; 09.01.2010

arrow_upward
1
arrow_downward

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

<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>";
person bboydev    schedule 26.04.2012

arrow_upward
0
arrow_downward

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

person Alexander Suleymanov    schedule 16.06.2014