Question

我正在使用jQuery Mask Plugin v1.5.3 - jquery-1.9.1.js

我有这个按钮：

<input type="button" class="btn btn-success" id="add_employee" value="add employee" />

使用Jquery添加一些html代码：

$( document ).ready(function() {
  $("#add_employee").click(function() {
    var html = "<tr><td>";
    html += "<input name=\'w_hour[]\' class=\'number\' type=\'text\'>";
    html += "</td></tr>";
    $("#detail").html(html);
   });
 });

我有这一行用Jquery mask设置html输入文本：

$('.number').mask('000,000.00', {reverse: true});

对于最初使用页面创建的项目，在初始化DOM时可以正常工作。

我的问题是，如何将Jquery掩码应用到DOM的新插入的html元素（在本例中为Input-text）以获得此功能。代码特别是：

html += "<td><input name=\'w_hour[]\' class=\'number\' type=\'text\'></td>";

因为，当我尝试编写数字时没有得到Jquery掩码，我猜这是因为它是一个插入的新元素。我不确定我是Jquery的新手，所以我很感激你的帮助。感谢

Answer 1

由于您正在创建一个新的DOM元素，因此事件不会动态地附加到此元素，您已告诉DOM新元素将使用掩码原型，因此用

替换代码

$( document ).ready(function() {
  $("#add_employee").click(function() {
    var html = "<tr><td>";
    html += "<input name=\'w_hour[]\' class=\'number\' type=\'text\'>";
    html += "</td></tr>";
    $("#detail").html(html);
    $('.number').mask('000,000.00', {reverse: true});
   });
 });

这样可以正常工作，因为现在插入新元素后，我们正在使用js引擎知道新创建的元素将具有掩码原型。

如何将类应用于动态插入的html元素？

1 个答案: