我用jquery动态生成了一个表数据。最初,当我用php完成它时,keyup事件工作得很好,我能够在T.Amount列中找到表的每一行的.qestimate和#number_of_houses的产品,但现在它不能工作,代码列表
HTML:
<table class="tg tg-table-light-1" border="">
<thead>
<tr>
<th>No.</th>
<th>Material</th>
<th>Qty</th>
<th>T. Amount</th>
</tr>
</thead>
</table>
JQuery的:
$(document).ready(function() {
table=$('.tg-table-light-1');
$.getJSON("<?php echo base_url() . 'material_estimation/loadEstimates' ?>/", function(materialdetails) {
i=1;
$.each(materialdetails , function(i, materials){
newmaterials= materials.Materials;
sanitized_newmaterials=newmaterials.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, '');
data="<tr class=\"tg-even\">
<td class=\"\">"+i+"</td>\n\
<td class=\"tg-even\">"+sanitized_newmaterials+"</td>\n\
<td class=\"\"><input type=\"text\" style=\"width:40px; text-align: center;\" class=\"qestimate\" name=\"qestimate[]\" value=\""+materials.Quantity_estimate+"\"/></td>\n\
<td class=\"\"><input type=\"text\" style=\"width:40px; text-align: center;\" class=\"tqty\" name=\"tqty[]\" value=\""+materials.total_quantity+"\"/></td>\n\
</tr>";
table.append(data);
i++;
});
});
//触发事件
$(".tg-even input").keyup(multInputs);
//我正在呼叫的功能但不起作用
function multInputs() {
var mult = 0;
$("tr.tg-even").each(function() {
// get the values from this row:
var $val1 = $('#number_of_houses option:selected').val();
var $val2 = $('.qestimate', this).val();
var $total = ($val1 * 1) * ($val2 * 1);
var qty = $('.tqty', this).val($total);
});
}
})
答案 0 :(得分:6)
使用委托:
$(document).on('keyup', '.tg-even input', function(e){
// ...
});
或者如果你愿意:
$(document).on('keyup', '.tg-even input', multInputs);
答案 1 :(得分:1)
呼叫:
$(".tg-even input").keyup(multInputs);
创建动态字段后..
答案 2 :(得分:0)
在实际项目中,我们不应该直接向文档添加委托触发器,或者如果您有任何其他地方输入某些文本,则性能是个问题。就像这样:
$('.tg-even').on('keyup', 'input', function(e){
// ...
});