Динамическое добавление ввода и использование .mask не работает

Question

В моем проекте я использую Bootstrap 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) {
    });
}

Этот код в результате Dynami c input :

<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 код на приведенный ниже. Он должен работать и для ваших входов Dynami c.

Причина, по которой он не работает, заключается в том, что при загрузке DOM эти входы Dynami c недоступны для маскировки с помощью ваши требования.

Итак, в этом случае нам нужно использовать привязку события в jQuery и использовать метод jQuery .on. Это работает так: он проверяет весь документ и применяет к вам ваш .mask ввод, включая динамически загружаемые входные данные.

В вашем случае нам просто нужно будет вызвать маску, когда вы щелкнете или фокус на элементах.

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

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