Похоже, не удается заставить jQuery .on() работать с элементами, созданными с помощью сценариев

#javascript #jquery

Вопрос:

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

Изначально я использовал $("input[name=inputname]") , который отлично работает для изначально загруженных файлов, но не работает при добавлении дополнительных. Поиск в Google и здесь заставил меня поверить, что я могу использовать .on функцию jQuery, хотя, похоже, я не могу заставить ее работать, что-то не так с этим кодом или мне нужно подойти к этому по-другому?

 $("div.data").on( "change", "input[name^=delivery-address-1]", function() {
  alert( $( this ).val() );
});

Заранее спасибо

РЕДАКТИРОВАТЬ: Привет, что касается «помечено как дубликат», как я уже сказал, я прочитал похожие ответы и знаю о них, но код, извлеченный из этих ответов, похоже, не работает в моей ситуации, и поэтому искал дополнительную помощь, спасибо.

1. какая версия jquery использовалась?

2. Это имя новых элементов? name^=delivery-address-1 Это внутри div?

3. Входные элементы должны быть внутри <div> работ здесь jsfiddle.net/v4AYb

4. Также обратите внимание, что ваш код работает только в том случае, если эти <input> элементы добавлены внутрь него <div class=data> …

5. Ваш код работает: jsfiddle.net/JkfSP Так в чем же разница?

Ответ №1:

Попробуйте использовать document и не 'div.data' так:

 $(document).on("change", "input[name^=delivery-address-1]", function() {
  alert($(this).val());
});

1. Хе-хе, тот же ответ, на 43 секунды быстрее. Я потратил слишком много времени на ввод объяснения, я думаю: D Хороший ответ.

2. Это заставляет его работать, спасибо (даже несмотря на то, что он находится в div.data — <div class="data fl"><input type="text" name="delivery-address-1?0" class="jqs-deli" /></div> , и спасибо @Dampe aswell и всем остальным за комментарии!

3. Тьфу, это так, глупый я. Я всегда упускаю из виду простые вещи!

4. Таким образом, решением было бы поместить событие туда, куда вы добавляете, а не в документ.

5. Да, это правильно, и я сделал это сейчас, хотя document по-прежнему работает, но не предпочтительнее, как вы указали. Поэтому, если кто-то не захочет указать на это в новом ответе, я буду проверять это как можно лучше.

Ответ №2:

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

например:

 $(document).on('change', 'input[name^=delivery-address-1]', function(){
  alert('hello');
});

1.Из документации jQuery For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

2. Определите «чрезмерный». Справедливое замечание, однако. Вы действительно не хотите делать это для всего.