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) {

    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 2

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

(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>

Answer 3

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

    $('#add').click(function(e){

      $('#generate').append('<input id="intTextBox" 

        class="intTextBox">').inputFilter(function(value) {

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

        });

      }

    );