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>