我正在使用jquery.maskMoney.js将掩码添加到它为正常输入工作的输入中。但它不适用于动态添加的输入。这是我正在使用的代码
$(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
$(wrapper).append('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
$('input[id^="demo"]').each(function () {
$(this).maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});
});
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]" id="demo[1]"></div>
</div>
请帮我卡住
您可以通过这种方式更改您的JavaScript。请参阅initMaskMoney()
,它在页面加载后和文本字段添加后都被调用。此外,您不需要迭代每个元素,您可以使用选择器一次选择所有元素。
<script type="text/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
$(wrapper).append('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>');
//re-init mask money to apply new added input
initMaskMoney();
}
});
initMaskMoney();
});
function initMaskMoney() {
$('input[id^="demo"]').maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});
}
</script>
更新看到@ Dekel的回答后,我认为这个版本更方便。 initMaskMoney
获取一个名为selector的参数。在此参数的帮助下,您可以为当前项目初始化maskmoney,仅为新添加的输入(在上一个答案中,所有输入框都再次启动MaskMoney)。
<script type="text/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
var newItem = $('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>')
$(wrapper).append(newItem); //add input box
//init mask money for only added input
initMaskMoney($(newItem).find('input'));
}
});
//init mask money for current inputs
initMaskMoney('input[id^="demo"]');
});
function initMaskMoney(selector) {
$(selector).maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});
}
</script>
您的选择器$('input[id^="demo"]').each
将适用于任何现有元素,但不适用于新创建的元素。您的问题是,当您单击按钮时 - 将新元素附加到文档,并且在这些元素上您没有启动.hasMoney
插件。
您可以做的是在将新的<input
附加到文档后 - 在该元素上调用.hasMoney
。
你可能想改变你的代码:
i = $('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>')
$(wrapper).append(i); //add input box
i.find('input').maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});
重点关注字段调用功能:
getDecimal2()
{
$("#eupdate_property_luasNet").maskMoney();
}
您可以使用.trigger('mask.maskMoney')触发格式化。
$("#budget_prevision").maskMoney({
prefix:'R$ ',
allowNegative: false,
thousands:'.',
decimal:',',
affixesStay: false
}).trigger('mask.maskMoney');