MaskMoney.js无法处理动态添加字段
MaskMoney.js not working on Dynamic add Field
我对动态添加字段组合MaskMoney,有一些问题
HTML部分
<div class='table-responsive mailbox-messages'>
<table id="dataTable" class='table table-hover'>
<tr>
<th>Keperluan</th>
<th>Tanggal Transaksi</th>
<th>Total Transaksi</th>
<th>Keterangan</th>
<th>Scan Foto</th>
<th>Action</th>
</tr>
<tbody class="input_fields_wrap">
<tr>
<td><input type="text" name="mytext[]" id="perlu'+x+'" class="form-control" required="required" placeholder="Keperluan"/></td>
<td><input type="text" name="mytexts[]" id="s" class="form-control tgl" required="required" placeholder="Tanggal Transaksi"/></td>
<td><input type="text" name="mytexts[]" id="demo1" class="form-control numeric " required="required" placeholder="Only Number"/></td>
<td><input type="text" name="mytexts[]" id="s" class="form-control" required="required" placeholder="Keterangan"/></td>
<td><input type="file" name="mytexts[]" id="s" class="small" required="required"/></td>
<td><button class="add_field_button btn btn-success">Add Field</button></td>
</tr>
</tbody>
</table>
</div>
Javascript
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){
x++; //text box increment
i = $('<tr><td><input type="text" name="mytext[]" id="perlu'+x+'" class="form-control" required="required" placeholder="Keperluan"/></td><td><input type="text" name="mytexts[]" id="s" class="form-control tgl" required="required" placeholder="Tanggal Transaksi"/></td><td><input type="text" name="mytexts[]" id="demo'+x+'" class="form-control numeric" required="required" placeholder="Only Number" /></td><td><input type="text" name="mytexts[]" id="s" class="form-control" required="required" placeholder="Keterangan"/></td><td><input type="file" name="mytexts[]" id="s" class="small" required="required"/></td><td><a href="#" class="remove_field btn btn-danger">Remove</a></td></tr>');
//re-init mask money to apply new added input
$(wrapper).append(i); //add input box
}
});
$(wrapper).on('click', '.remove_field', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).closest("tr").remove(); //Remove field html
x--; //Decrement field counter
});
});
$("#demo1").maskMoney({prefix:'Rp ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});
我的代码的运行片段可以在这里找到
字段"Total Transaksi"、MaskMoney Notworking、上的问题
第一个字段工作正常,但当按钮添加新字段=不工作时。
我在网上搜索过,但答案仍然难以捉摸
感谢
运行maskMoney()
方法时,只运行一次;在页面加载开始时。之后,其他新字段就没有maskMoney()
提供的绑定。您将需要重新绑定到每个新的元素集,或者使用事件委派。看起来maskMoney
插件没有委派的功能,所以您可以重新绑定每个按钮的创建:
http://jsfiddle.net/rmj3ryer/1/
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- 如何使用Angular动态添加iframe-src
- 如何向JSON数组动态添加属性
- 动态添加通过json创建的选择项
- 使用jQuery根据动态生成的html动态添加html
- 使用.on动态添加jquery/js不知道的html元素
- JS动态添加字段-删除按钮不起作用
- 动态添加AngularJS脚本
- 将表行动态添加到表或tbody元素中
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 将特定属性动态添加到元素中
- 在highcharts.js中向点弹出窗口动态添加文本
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- 使用jQuery动态添加onClick事件
- 如何在Opencart中动态添加JavaScript
- 剑道UI下载列表:如何动态添加新元素
- 动态添加复选框和输入框 jQuery
- 动态添加哈希标记;t工作
- 将图表动态添加到组合高图表中