动态添加输入并使用.mask不起作用

Question

在我的项目中，我使用了引导4和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中添加输入时，它工作得很好(这个函数只允许输入数字)。

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

怎么修理呢？

Answer 1

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

它不能工作的原因是，当加载DOM时，这些动态输入无法用您的需求掩盖。

因此，在本例中，我们需要在jQuery中使用事件绑定，并使用jQuery .on方法。它的工作方式是检查整个文档并将.mask应用于输入，包括动态加载的输入。

在您的情况下，当您单击或专注于元素时，我们只需要调用掩码。

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

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