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 = ""; } }); }; }(jQuery)); // Para números enteros $(".intTextBox").inputFilter(function(value) { return /^-?\\d*$/.test(value); }); $('#add').click(function(e){ $('#generate').append('<input id="intTextBox" class="intTextBox">'); } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">ADD</button> <div id="generate"> <input id="intTextBox" class="intTextBox"> </div>

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

Answer 1

使用已连接的验证方法附加 DOM 元素

    $('#add').click(function(e){
      $('#generate').append('<input id="intTextBox" 
        class="intTextBox">').inputFilter(function(value) {
         return /^-?\d*$/.test(value);
        });
      }
    );

Answer 2

当您引用一个元素时，它不会一直寻找在代码运行后添加的新元素。 所以它不会定位动态创建的输入。

您需要创建元素并在该元素上使用 inputFilter。

$(".intTextBox").inputFilter(function(value) {
    return /^-?\d*$/.test(value);
});

$('#add').click(function(e){
  var newInput = $('<input name="intTextBox" class="intTextBox">');
  newInput.inputFilter(function(value) {
    return /^-?\d*$/.test(value);
  });
  $('#generate').append(newInput);
}

删除代码重复

function addFilter (elems) {
  elems.inputFilter(function(value) {
    return /^-?\d*$/.test(value);
  });
}

addFilter($(".intTextBox"));

$('#add').click(function(e){
  var newInput = $('<input name="intTextBox" class="intTextBox">');
  addFilter(newInput);
  $('#generate').append(newInput);
}

Answer 3

下面的代码为新元素随机化您的 ID 以避免冲突（不是一个完美的解决方案；只是示例的一个hacky 解决方法），然后在新元素上应用过滤器。

 (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)); function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } // Para números enteros $(".intTextBox").inputFilter(function(value) { return /^-?\\d*$/.test(value); }); $('#add').click(function(e) { let randomId = "intTextBox_" + getRandomInt(100000); $('#generate').append(`<input id="${randomId}" class="intTextBox">`); $(`#${randomId}`).inputFilter(function(value) { return /^-?\\d*$/.test(value); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">ADD</button> <div id="generate"> <input id="intTextBox" class="intTextBox"> </div>