scooby scooby - 1 month ago 10
Javascript Question

Jquery how to get change event in the element later loaded

The rows of my table are added dynamically and within each row possess a select option, I need to perform an action when the select is changed, but because the line is loaded after the page loaded, my function does not work.

<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 to add row

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 change select:

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

});


});

which function could use to manipulate the dynamic selects? Tks.

Answer

You can delegate the event to a parent element:

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

In your case:

$("#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! ;)