jQuery on change не возвращает значение атрибута

Question

У вас проблема с отображением select on change attribute id.

PHP:

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);"> 
      <option value=""></option> 
      FOREACH 
     </select> 
    </div> 
    <div class="form-group"> 
     <fieldset disabled> 
      <select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required> 
       <option value="" disabled selected>Select Subcategory</option> 
      </select> 
     </fieldset> 
    </div> 
    <div class="form-group"> 
     <td><input type="text" name="gramai" class="form-control" value=""></td> 
    </div> 
    <div class="form-group" id="kalb"> 
     <input type='text' name='1[]' value="-" disabled> 
     <input type='text' name='12[]' value="-" disabled> 
     <input type='text' name='123[]' value="-" disabled> 
     <input type='text' name='1234[]' value="-" disabled> 
    </div> 
</form> 

Мой JQuery код:

$("select").on('change', function() { 
    var status = $('select').attr('id'); 
    alert(status); 
}); 

var categoryId = 0; 
var category = 0; 
var product = 0; 
var disableId = 0; 

$("#add").click(function() { 
    categoryId = categoryId + 1; 
    category = category + 1; 
    product = product + 1; 
    disableId = disableId + 1; 

    $("#item").append('<div class="col-xs-12"><form action="" 
     class="form-inline"><div class="form-group"><select name="kategorijos" 
     **....... same code as above (php)** 
    }); 

Когда я выбираю первую строку он оповещает значение. Но затем я добавляю новую строку с кнопкой добавления, а затем меняю второй вариант, предупреждение не работает, и я не получаю идентификатор select. Где может быть проблема? Может быть, это не работает с append html?

Answer 1

Для динамически генерируемого элемента необходимо использовать event delegation, а также this вместо 'select', чтобы получить id выпадающего списка.

$(document).on('change', 'select', function() { 
    var status = $(this).attr('id'); 
    alert(status); 
});