変更時のjQueryが属性値を返さない

Question

変更属性IDにselectを表示する際に問題があります。

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)** 
    }); 

私はそれが値を警告最初の行を選択します。しかし、その後、私は、追加ボタンで新しい行を追加し、2番目のアラートが動作しない選択を変更し、私は選択IDを取得しません。どこに問題がありますか？たぶんそれはHTMLを追加すると動作しませんか？

Answer 1

動的に生成される要素にevent delegationを使用し、'select'の代わりにthisを使用して、idのドロップダウンを取得する必要があります。

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