Question

我的表的行是动态添加的，并且每行中都有一个select选项，我需要在select更改时执行一个动作，但是因为在页面加载后加载了行，所以我的函数不起作用。 / p>

<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>

我的添加行

的功能

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

更改选择：

$("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');
        }
    });
});

-
Boa 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-Tag及其上方，有文档为所有标签的父级。

Jquery如何在以后加载的元素中获取更改事件

2 个答案: