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

时间:2014-01-23 11:23:36

标签: javascript jquery

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


                });


        }

})

3 个答案:

答案 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){
    // ...
});