Question

我用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);


                });


        }

}）

Answer 1

使用委托：

$(document).on('keyup', '.tg-even input', function(e){
     // ...
});

或者如果你愿意：

$(document).on('keyup', '.tg-even input', multInputs);

Answer 2

呼叫：

$(".tg-even input").keyup(multInputs);

创建动态字段后..

Answer 3

在实际项目中，我们不应该直接向文档添加委托触发器，或者如果您有任何其他地方输入某些文本，则性能是个问题。就像这样：

$('.tg-even').on('keyup', 'input', function(e){
    // ...
});

Keyup事件不使用jquery生成的字段

3 个答案: