"autoNumeric.js“在动态创建的表单元素中不起作用

Question

我在我的项目中使用AutoNumeric.js (v4.6.0)，并且我有一个动态创建价格字段的表单。加载页面时，默认情况下的第一个输入可以正常工作，但随后自动创建的输入就不能正常工作了。我该如何解决这个问题？从现在开始谢谢你。

$(function () {
        new AutoNumeric(".autonumber", { currencySymbol : '$' });

        $(document).on('click', '#addSpending', function () {
            var newSpending =
                '<div class="row g-1">' +
                    '<div class="col-md-12">' +
                        '<input type="text" class="form-control autonumber" name="amount[]" required>' +
                    '</div>' +
                '</div>';

            $('#spendings').append(newSpending);
        });
    });

Answer 1

在将字段追加到表单后，您需要使用AutoNumeric实例，如下所示：

$(function () {
  $(document).on("click", "#addSpending", function () {
    var newSpending =
      '<div class="row g-1">' +
      '<div class="col-md-12">' +
      '<input type="text" class="form-control autonumber" name="amount" required>' +
      "</div>" +
      "</div>";

    $("#spendings").append(newSpending);
    new AutoNumeric("input[name=amount]", {
      currencySymbol: "$"
    })
  });
});

这也是一个sandbox