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

Question

我正在使用 jQuery Mask 插件 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 掩码的 html 输入文本:

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

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

我的问题是，如何将 Jquery 掩码应用到 DOM 中新插入的 html 元素(在本例中为输入文本)以获得此功能。具体代码是:

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

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

Answer 1

由于您正在创建一个新的 DOM 元素，因此事件不会动态附加到该元素，您已经告诉 DOM 新元素将使用掩码原型(prototype)，因此请将您的代码替换为

$( 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 引擎知道新创建的元素将具有 mask protype。