Javascript 动态添加输入并使用.mask无效

在我的项目中，我使用Bootstrap4和jQuery/JavaScript

我有以下代码：

$(document).ready(function () {
    $('.currencyMask').mask("###0.00", {reverse: true});
    $('.numbersMask').mask("#", {reverse: true});
});

function getDynamicInput(productType) {
    $(".dynamic-content-input").load("{{ route('product.product.feature') }}/" +
                                         productType +
                                         "/@if (!empty($product)){{ $product->id }} @else{{0}} @endif",
                                     function (response, status, xhr) {
    });
}

此代码用于动态输入的结果：

<div class="dynamic-content-input">
    <div class="form-group row">
        <label class="col-form-label text-right col-lg-3 col-sm-12">Pole liczbowe</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
            <input type="text" name="form-2" class="form-control  numbersMask " value="">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-form-label text-right col-lg-3 col-sm-12">Pole tekstowe</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
            <input type="text" name="form-3" class="form-control " value="">
        </div>
    </div>
</div>

波兰里兹堡
波兰特克斯托

这工作做得很好。问题在于JavaScript函数numbersMask

当我在HTML中添加输入时，它工作正常（该函数只允许输入数字）

但是，对于动态添加的输入，它根本不起作用

---

如何修复它？

将您的代码更改为下面的代码。它也应该适用于您的动态输入

它不起作用的原因是，当加载时，这些动态输入无法被您的需求屏蔽

因此，在这种情况下，我们需要在jQuery中使用事件绑定，并使用jQuery

.on

方法。它的工作方式是检查整个文档，并将

.mask

应用于您的输入，包括动态加载的输入

在您的情况下，我们只需要在您单击或聚焦元素时调用掩码

$(document).on("focus", ".currencyMask", function() {
  $(this).mask("###0.00", {
    reverse: true
  });
});

$(document).on("focus", ".numbersMask", function() {
  $(this).mask("#", {
    reverse: true
  });
});