在append()函数中运行脚本

时间:2017-10-25 05:18:24

标签: javascript jquery

我在append()函数中遇到运行脚本的问题,有关详细信息,请参阅下面的代码:

 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="item[]" placeholder="Item Pekerjaan" class="form-control name_list"/></td><td><input type="text" name="volume[]" placeholder="vol.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="satuan[]" placeholder="etc.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="material[]" placeholder="Harga Volume" class="form-control name_list" id="currency"/></td><td><input type="text" name="jasa[]" placeholder="Harga Jasa" class="form-control name_list" id="currency1"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });    
 });  
 </script>

在上面的代码中,我无法以jasa或材料形式为id="currency"运行jQuery MaskMoney。

有没有人可以给我这个案子的建议?

感谢您的帮助。

================================

Javascrypt Maskmoney:

       $(function() {
            $("#currency").maskMoney({
                formatOnBlur: true,
                reverse: true,
                prefix: 'Rp ',
                selectAllOnFocus: true,
                precision: 0
            });
            $('form').on('submit', function(e) {
                var v = $("#currency").maskMoney('destroy').val()
                        .replace(/Rp\s|[.,]/g, '');
                $("#currency").val(v);
            });
});

3 个答案:

答案 0 :(得分:1)

首先是一条建议,你在DOM中使用相同的id生成多个元素。你最好不要这样做,因为id被设计为唯一的(改为使用类)。

关于你的问题,你应该在添加行后调用MaskMoney,这样它就可以将它应用到新创建的元素......

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="item[]" placeholder="Item Pekerjaan" class="form-control name_list"/></td><td><input type="text" name="volume[]" placeholder="vol.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="satuan[]" placeholder="etc.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="material[]" placeholder="Harga Volume" class="form-control name_list" id="currency"/></td><td><input type="text" name="jasa[]" placeholder="Harga Jasa" class="form-control name_list" id="currency1"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
           $('tr#row'+i).find('input#currency, input#currency1')
                        .maskMoney({                                                                       
                            formatOnBlur: true,
                            reverse: true,
                            prefix: 'Rp ',
                            selectAllOnFocus: true,
                            precision: 0
                        }); 
      });    
 });

但你最好用课程来做...

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'">' +
                                        '<td><input type="text" name="item[]" placeholder="Item Pekerjaan" class="form-control name_list"/></td>' +
                                        '<td><input type="text" name="volume[]" placeholder="vol.." style="width:80px;" class="form-control name_list"/></td>' +
                                        '<td><input type="text" name="satuan[]" placeholder="etc.." style="width:80px;" class="form-control name_list"/></td>' +
                                        '<td><input type="text" name="material[]" placeholder="Harga Volume" class="form-control name_list" class="currency"/></td>' +
                                        '<td><input type="text" name="jasa[]" placeholder="Harga Jasa" class="form-control name_list" class="currency"/></td>' +
                                        '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>' +
                                      '</tr>');
           $('tr#row'+i+' input.currency').maskMoney({                                                                       
                                              formatOnBlur: true,
                                              reverse: true,
                                              prefix: 'Rp ',
                                              selectAllOnFocus: true,
                                              precision: 0
                                          });  
      });    
 });

答案 1 :(得分:0)

您可以使用此代码

<script type="text/javascript">

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="item[]" placeholder="Item Pekerjaan" class="form-control name_list"/></td><td><input type="text" name="volume[]" placeholder="vol.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="satuan[]" placeholder="etc.." style="width:80px;" class="form-control name_list"/></td><td><input type="text" name="material[]" placeholder="Harga Volume" class="form-control name_list" id="currency'+$i+'"/></td><td><input type="text" name="jasa[]" placeholder="Harga Jasa" class="form-control name_list" id="currency1"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
           $('#currency'+i).maskMoney(); 
      });  

 });  
 </script>

答案 2 :(得分:-1)

我认为你应该检查这个解决方案

How can I apply a dynamic mask in an dynamic form?

我猜你正面临类似的问题。