"Денежный" паттерн не работает на инпуты, которые динамические добавлены с помощью .append(). Как исправить?

Question

[akrvch]

У меня есть jQuery код, который преобразует текст вводимый в инпут в "денежный" формат ($100,000.00). Но он не работает, если я добавляю input'ы с помощью .append(). У кого есть мысли, как это исправить? Спасибо.
Вот сам код:

$("input[data-type='currency']").on({
        keyup: function () {
            formatCurrency($(this));
        },
        blur: function () {
            formatCurrency($(this), "blur");
        }
    });

    function formatNumber(n) {
        return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }


    function formatCurrency(input, blur) {
        var input_val = input.val();

        if (input_val === "") {
            return;
        }
        var original_len = input_val.length;
        var caret_pos = input.prop("selectionStart");

        if (input_val.indexOf(".") >= 0) {
            var decimal_pos = input_val.indexOf(".");
            var left_side = input_val.substring(0, decimal_pos);
            var right_side = input_val.substring(decimal_pos);
            left_side = formatNumber(left_side);
            right_side = formatNumber(right_side);
            if (blur === "blur") {
                right_side += "00";
            }
            right_side = right_side.substring(0, 2);
            input_val = "$" + left_side + "." + right_side;

        } else {
            input_val = formatNumber(input_val);
            input_val = "$" + input_val;
            if (blur === "blur") {
                input_val += ".00";
            }
        }
        input.val(input_val);
        var updated_len = input_val.length;
        caret_pos = updated_len - original_len + caret_pos;
        input[0].setSelectionRange(caret_pos, caret_pos);
    }

А вот так добавляю строку с нужным инпутом:

$('#parts_tbody').append('<tr><th>' + part.name + '</th><td>' + part.description + '</td><td><input id="qty_'+part.part_id+'" class="form-control" type="number" name="qty"></td><td><input id="price_'+part.part_id+'" class="form-control" type="text" name="unit_price" data-type="currency" pattern="^\\$\\d{1,3}(,\\d{3})*(\\.\\d+)?$" required></td><td></td></tr>')

Answer 1

[Rsa97]

Вы не добавляете обработчики событий на новые элементы. Либо вешайте обработчики на каждый создаваемый элемент, либо используйте всплытие событий, устанавливая обработчик на неизменяемый родительский элемент.
$("input[data-type='currency']").on('keyup', ...) меняете на

$('#parts_tbody').on('keyup', 'input[data-type="currency"]', ...)

Comments

[akrvch]

Спасибо, второй вариант сработал