如何以动态形式应用动态蒙版？答案

【问题标题】：How can I apply a dynamic mask in an dynamic form?如何以动态形式应用动态蒙版？
【发布时间】：2015-06-16 20:14:39
【问题描述】：

我的动态表单有问题。这个输入是：

<input type="text" class="form-control" placeholder="EX: (XX)-XXXX-XXXX" name="phone[]" id="phone">

这个输入有一个掩码

$('#phone').mask('(00)-0000-00000');

一切正常，但是当我添加一个在第一个之后追加新输入的按钮时， .mask 过滤器对新的 .mask 过滤器不起作用。如何在动态表单中应用动态掩码？

.append 函数是：

$('#plusPhone').click(function(){
   $('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>");   });

【问题讨论】：

你在哪里将掩码添加到新输入中？
@Markai 在页面末尾： .mask 函数就是这个插件> [link]plugins.jquery.com/mask
但是当你添加一个新的输入时，你也需要给那个新对象添加一个掩码：$('#phone').mask('(00)-0000-00000'); after $('#appendPhone').append[...]

标签： javascript jquery dynamic

【解决方案1】：

您必须像这样动态添加它。这是一个未经测试的代码，但想法保持不变。

$('#plusPhone').click(function(){
  $('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>"); 

  var code = "<script>$('#telefone').mask('(00)-0000-00000');</scr"+"ipt>";
  $('#appendPhone').append($(code)[0]);
)};

这是一个如何通过在 htmls 中动态附加来执行 js 的示例 - enter link description here 这样，您可以将代码 sn-p 附加到动态创建的 html 中。希望对你有帮助

【讨论】：

我试过了，但没有用。我将此添加到我的追加中，并且相同...不起作用=/ $('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div><script>$('#phone').mask('(00)-0000-00000');</scr"+"ipt>");
我纠正了一个错字，顺便说一句，你真的想掩盖什么。您的代码没有任何带有 id telephone 的内容。可以准确显示您的代码吗？
所以你的意思是，这个掩码应该在你添加动态 html 或单击某个按钮时出现。不太清楚:)
我尝试使用 .clone().insertAfter() 但同样的发生... =/

【解决方案2】：

帕米奥走在正确的轨道上。但是将脚本附加到页面似乎不起作用（？）。以下对我有用：

$('#plusPhone').click(function(){
   var HTML = 'this contains an input field with the class you want to mask';
   jQuery('#element-you-want-to-append-to').append(HTML);
   jQuery('.class-you-want-masked').mask('99-99-9999');
   //Just call the mask AFTER appending the input, and it should be applied.
)};

【讨论】：