Вопрос по select, dynamically-generated, jquery, onchange – Функция Jquery .change () не работает с динамически заполненным списком SELECT

25

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

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

Есть идеи?

Быстрый совет вместоecho "<option value='".$value."'>", пытаться:echo "<option value='$value'>", Если вы обращаетесь к массиву, вы можете сделатьecho "<option value='{$values[0]}'>" Skilldrick

Ваш Ответ

7   ответов
5

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

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

Используйте jQuery bind

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

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

офигенный ответ !!! помог сразу! Chaturvedi Saurabh
3

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

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

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

путь jquery является локальным для моей системы, попробуйте изменить это .. Anurag
errrmm ... ваш фрагмент кода выдает ошибку javascript .... Jason
И .change, и .bind работают одинаково. Они будут связываться только с элементами, которые в данный момент находятся в DOM. Anurag
@ Джейсон: Это не так сложно проверить ... посмотрите этот небольшой фрагмент 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() это функция, которая связывает как текущие, так и будущие события. Anurag
@anurag - неверно. если оба элемента уже находятся в DOM, да, они работают одинаково. но .change не будет связывать новые элементы в DOM (именно поэтому OP задает вопрос ...), .bind будет связывать текущие и будущие события с элементами. Jason
1

http://docs.jquery.com/Events/live

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

"В настоящее время не поддерживается: ... изменить ..." Sampson
Переполнение стека ОШИБКА! brian chandley
6

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие вопросы