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

25

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

echo "";
echo "--".sizeof($start)." PLAYERS LOADED--";

foreach ($start as $value) {
    echo "".$value."";
 }  
  echo "";
}  

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

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

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

Есть идеи?

Быстрый совет вместоecho "", пытаться:echo "", Если ты'доступ к массиву, вы можете сделатьecho "" Skilldrick

Ваш Ответ

7   ответов
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>";
20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

путь jquery является локальным для моей системы, попробуйте изменить это .. Anurag
И .change, и .bind работают одинаково. Они будут связываться только с элементами, которые в данный момент находятся в DOM. Anurag
errrmm ... ваш фрагмент кода выдает ошибку javascript .... Jason
@ Джейсон: Этоне так сложно проверить ... посмотрите этот небольшой фрагмент HTML (slexy.org/raw/s2XA8QihVm) Я написал, чтобы проверить, еслиbind работает для будущих элементов DOM, и это нет. Также это взято из jQuery 's источник, он в основном перенаправляет вызовы функций,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
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

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