Невозможно вызвать событие на динамически созданных элементах с помощью jQuery

Question

Я создаю ряд элементов, где в моей ROW у меня есть поле выбора/Drop Down. Что я хочу, так это то, что я хочу позвонить onChange функция на каждом выпадающем списке на каждой строке.

count = 1; 
jQuery('select[id="warehouse-' + count + '"]').change(function() { 
    alert('hello'); 
    var urlWareHouse = "<?php echo $this->url('stock', array('action' => 'populateLocationInWarehouse', 'controller' => 'Stock')) ?>"; 
    url = urlWareHouse + '/' + jQuery('id="warehouse-' + count + '"]').val(); 
    SelectBoxNullValue = "Select Location"; 
    populateSelectBox(url, 'warehouse-'+count, 'location'); 
    count++; 
}); 

Мой populateSelectBox функция просто Аякса вызов, который заполнит данные для вновь созданной Select Element. Я не знаю, что я делаю неправильно. Дело в том, что я не могу вызвать onChange на недавно созданном с моим подходом.

Answer 1

Используйте функцию on() для привязки к элементам, даже новым, кроме того, вам нужно постоянно перепроверять элемент.

jQuery(document).on("change",'select[id="warehouse-' + count + '"]',function() { 
    alert('hello'); 
    var urlWareHouse = "<?php echo $this->url('stock', array('action' => 'populateLocationInWarehouse', 'controller' => 'Stock')) ?>"; 
    url = urlWareHouse + '/' + jQuery('id="warehouse-' + count + '"]').val(); 
    SelectBoxNullValue = "Select Location"; 
    populateSelectBox(url, 'warehouse-'+count, 'location'); 
    count++; 
}); 

Answer 2

Используйте .on(), вместо .change().

. Замена только связывает один раз. Если элемент добавлен, его необходимо переопределить. .on делает это автоматически.

Кроме того, поскольку у вас есть идентификатор, вам не нужно указывать «выбрать» как часть вашего селектора.

jQuery('#warehouse-' + count) сделаю.