Jquery 方法不适用于动态生成的元素

Question

我正在尝试创建价目表并验证其值。

这是我的功能：

(function($) {

        $.fn.inputFilter = function(inputFilter) {

            return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {

                if (inputFilter(this.value)) {

                    this.oldValue = this.value;

                    this.oldSelectionStart = this.selectionStart;

                    this.oldSelectionEnd = this.selectionEnd;

                } else if (this.hasOwnProperty("oldValue")) {

                    this.value = this.oldValue;

                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);

                } else {

                    this.value = "";

                }

            });

        };

    }(jQuery));

    // Para números enteros

    $(".intTextBox").inputFilter(function(value) {

        return /^-?\d*$/.test(value);

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="intTextBox" id="intTextBox">

这很好用。

但是当我动态插入元素时，该方法不起作用。

(function($) {

        $.fn.inputFilter = function(inputFilter) {

            return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {

                if (inputFilter(this.value)) {

                    this.oldValue = this.value;

                    this.oldSelectionStart = this.selectionStart;

                    this.oldSelectionEnd = this.selectionEnd;

                } else if (this.hasOwnProperty("oldValue")) {

                    this.value = this.oldValue;

                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);

                } else {

                    this.value = "";

                }

            });

        };

    }

   

我怎么能解决这个问题？看了一上午，感谢阅读。（我有更多的验证方法，这是一个小总结）。

Answer 1

当您引用一个元素时，它不会一直寻找代码运行后添加的新元素。所以它不会定位动态创建的输入。您需要创建元素并在该元素上使用 inputFilter。$(".intTextBox").inputFilter(function(value) {&nbsp; &nbsp; return /^-?\d*$/.test(value);});$('#add').click(function(e){&nbsp; var newInput = $('<input name="intTextBox" class="intTextBox">');&nbsp; newInput.inputFilter(function(value) {&nbsp; &nbsp; return /^-?\d*$/.test(value);&nbsp; });&nbsp; $('#generate').append(newInput);}删除代码重复function addFilter (elems) {&nbsp; elems.inputFilter(function(value) {&nbsp; &nbsp; return /^-?\d*$/.test(value);&nbsp; });}addFilter($(".intTextBox"));$('#add').click(function(e){&nbsp; var newInput = $('<input name="intTextBox" class="intTextBox">');&nbsp; addFilter(newInput);&nbsp; $('#generate').append(newInput);}

Answer 2

下面的代码将您的 ID 随机化为新元素以避免冲突（不是完美的解决方案；只是该示例的变通方法），然后在新元素上应用过滤器。(function($) {&nbsp; $.fn.inputFilter = function(inputFilter) {&nbsp; &nbsp; return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {&nbsp; &nbsp; &nbsp; if (inputFilter(this.value)) {&nbsp; &nbsp; &nbsp; &nbsp; this.oldValue = this.value;&nbsp; &nbsp; &nbsp; &nbsp; this.oldSelectionStart = this.selectionStart;&nbsp; &nbsp; &nbsp; &nbsp; this.oldSelectionEnd = this.selectionEnd;&nbsp; &nbsp; &nbsp; } else if (this.hasOwnProperty("oldValue")) {&nbsp; &nbsp; &nbsp; &nbsp; this.value = this.oldValue;&nbsp; &nbsp; &nbsp; &nbsp; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.value = "";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; };}(jQuery));function getRandomInt(max) {&nbsp; return Math.floor(Math.random() * Math.floor(max));}// Para números enteros$(".intTextBox").inputFilter(function(value) {&nbsp; return /^-?\d*$/.test(value);});$('#add').click(function(e) {&nbsp; let randomId = "intTextBox_" + getRandomInt(100000);&nbsp; $('#generate').append(`<input id="${randomId}" class="intTextBox">`);&nbsp; $(`#${randomId}`).inputFilter(function(value) {&nbsp; &nbsp; return /^-?\d*$/.test(value);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="add">ADD</button><div id="generate">&nbsp; <input id="intTextBox" class="intTextBox"></div>

Answer 3

使用已连接的验证方法追加 DOM 元素&nbsp; &nbsp; $('#add').click(function(e){&nbsp; &nbsp; &nbsp; $('#generate').append('<input id="intTextBox"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; class="intTextBox">').inputFilter(function(value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return /^-?\d*$/.test(value);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );