Jquery後でロードされる要素でイベントを変更する方法

Question

テーブルの行が動的に追加され、各行内に選択オプションがあるため、選択が変更されたときにアクションを実行する必要があります。ページが読み込まれ、私の機能は動作しません。

<table id="grid-items" class="table table-bordered table-hover">   
<thead>    
    <th>Cod</th> 
    <th>Desc</th> 
    <th>Uni</th>   
    <th>N.C.M.</th>                   
</thead>    
<tr>         
    <td><input type="text" id="" class="form-control item-cod" required></input></td>          
    <td style="width:400px;"><select data-placeholder="Selecione" class="chosen-select item-descricao" style="width:350px;" tabindex="2" id=""></select></td> 
    <td><input type="text" id="" class="form-control item-ncm" required></input></td>        
    <td><button class="btn btn-default bg-red" onclick="RemoveTableRow(this)" type="button">Remover</button></td> 
</tr> 
<tfoot> 
    <tr> 
     <td colspan="5" style="text-align: left;"> 
      <button class="btn btn-primary" onclick="AddTableRow()" type="button">Adicionar Item</button> 
     <td> 
    </tr> 
</tfoot> 

My機能

function AddTableRow() { 



var newRow = $("<tr>"); 
var cols = ""; 

cols += '<td><input type="text" id="item-codigo" name="produto.itens[].codigo" class="form-control" required></input></td>'; 
cols += '<td style="width:400px;"><select data-placeholder="Selecione" class="chosen-select item-descricao" style="width:350px;" tabindex="2" id=""></select></td>'; 

cols += '<td><input type="text" id="item-ncm" name="produto.itens[].ncm" class="form-control" required></input></td>';  

cols += '<td>'; 
cols += '<button class="btn btn-default bg-red" onclick="RemoveTableRow(this)" type="button">Remover</button>'; 
cols += '</td>';   

newRow.append(cols); 
$("#grid-items").append(newRow); 


var options = '<option value="">Selecione</option>'; 

$.each(produtos, function (key, val){ 
    options += '<option value="' + val.id + '">' + val.descricao + '</option>'; 
}); 

$("td .item-descricao").html(options); 

var config = { 
      '.chosen-select'   : {}, 
      '.chosen-select-deselect' : {allow_single_deselect:true}, 
      '.chosen-select-no-single' : {disable_search_threshold:10}, 
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, 
      '.chosen-select-width'  : {width:"95%"} 
     } 



for (var selector in config) { 
    $(selector).chosen(config[selector]); 
} 

Whem変化が選択行を追加します

$("td .item-descricao").on("change", function(e) { 


var codigo = this.value; 

$.each(produtos, function (key, val){ 

     if(val.id == codigo){   



      $("td .item-codigo").val(val.id).trigger('change'); 
      $("td .item-ncm").val(val.ncm).trigger('change'); 
     }   

    }); 

}）。

どの機能を使用して動的選択を操作できますか？ Tks。

Answer 1

あなたは親要素にイベントを委任することができますあなたの場合は

$("parent-selector-goes-here").on("change", "child-selector-goes-here", function(e) { 
    // your code for the items' events 
    // here, "this" will be the event target element 
}; 

を：

$("#grid-items").on("chage", "td .item-descricao", function(e) { 
    var codigo = this.value; 

    $.each(produtos, function (key, val) { 
     if (val.id == codigo) { 
      $("td .item-codigo").val(val.id).trigger('change'); 
      $("td .item-ncm").val(val.ncm).trigger('change'); 
     } 
    }); 
}); 

から
ボアsorteを！ ;）

Answer 2

あなたは正しいはい、この行は、現在マッチした要素を取得し、変更イベントを添付します：

$("td .item-descricao").on("change", function(e) { ... }); 

あなたの代わりに使用する必要があり、何がドキュメントのイベントハンドラをアタッチし、トリガーにそれをフィルタであり、それはCSSセレクタに一致する場合にのみ、イベント：

$(document).on("change", "td .item-descricao", function(e) { 
var target = $(e.target); 
// ... 
}); 

これは「イベントがバブリング」と呼ばれる作品理由：変更イベントは、「アップバブル」DOMツリーが、その選択からすべての方法を考え出すだろうhtmlタグとそれ以上の場合、文書はparenすべてのタグのうちのt。