大家好,我在下面的脚本中添加了输入内容,但是我无法插入掩码。我正在使用的插件https://github.com/igorescobar/jQuery-Mask-Plugin
在第一个字段中,掩码正在运行,添加时未添加掩码。
可以帮忙吗?
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
$(wrapper).append("<div><input type=\"text\" name=\"mytext[]\" id=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
})
});
</script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]" id="date"></div>
</div>
<script type="text/javascript">
$('#date').mask('00/00/0000');
</script>
在$('#date').mask('00/00/0000');
内添加$(document).ready(function() {})
因为不能保证在像这样的脚本块中运行文档时文档已经完成加载。Doco:https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
稍作清理。
var wrapper = $(".input_fields_wrap");
var button = $(".add_field_button");
var input = $("#date");
button.click(function (e) {
e.preventDefault();
wrapper.append("<div><input type=\"text\" name=\"mytext[]\" id=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
});
wrapper.on("click", ".remove_field", function (e) {
e.preventDefault();
$(this).parent('div').remove();
})
input.mask('00/00/0000');
首先,更改ID选择器#date
类.date
,因为您不能有多个具有相同ID的元素。
您需要在$('.date').mask('00/00/0000');
方法内移动$(document).ready(function() {})
的第二件事。
第三,您必须将mask绑定到新创建的输入元素。下面是修改上述建议更改后的工作代码副本。
<script type="text/javascript">
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
$(wrapper).append("<div><input type=\"text\" name=\"mytext[]\" class=\"date\"/><a href=\"#\" class=\"remove_field\">Remove</a></div>");
$('.date').mask('00/00/0000');
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('.date').mask('00/00/0000');
});
</script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]" class="date"></div>
</div>
<script type="text/javascript">
$('#date').mask('00/00/0000');
</script>