Javascript Jquery方法没有';不处理动态生成的元素
我正在尝试创建一个价目表并验证其值 这是我的职责:Javascript Jquery方法没有';不处理动态生成的元素,javascript,html,jquery,Javascript,Html,Jquery,我正在尝试创建一个价目表并验证其值 这是我的职责: (函数($){ $.fn.inputFilter=函数(inputFilter){ 返回此参数。on(“输入键向下键向上键向下键鼠标向下键向下鼠标右键选择上下文菜单下拉”,函数(){ if(inputFilter(this.value)){ this.oldValue=this.value; this.oldSelectionStart=this.selectionStart; this.oldSelectionEnd=this.select
(函数($){
$.fn.inputFilter=函数(inputFilter){
返回此参数。on(“输入键向下键向上键向下键鼠标向下键向下鼠标右键选择上下文菜单下拉”,函数(){
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);
}否则{
此值为“”;
}
});
};
}(jQuery));
//肠段
$(“.intTextBox”).inputFilter(函数(值){
返回/^-?\d*$/.test(值);
});代码>
使用已连接的验证方法附加DOM元素
$('#add').click(function(e){
$('#generate').append('<input id="intTextBox"
class="intTextBox">').inputFilter(function(value) {
return /^-?\d*$/.test(value);
});
}
);
$('#添加')。单击(函数(e){
$('#generate').append('').inputFilter(函数(值){
返回/^-?\d*$/.test(值);
});
}
);
引用元素时,它不会一直查找代码运行后添加的新元素。因此,它不会定位动态创建的输入
您需要创建元素并在该元素上使用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);
}
$(“.intTextBox”).inputFilter(函数(值){
返回/^-?\d*$/.test(值);
});
$('#添加')。单击(函数(e){
var newInput=$('');
inputFilter(函数(值){
返回/^-?\d*$/.test(值);
});
$('#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);
}
函数addFilter(elems){
元素输入过滤器(函数(值){
返回/^-?\d*$/.test(值);
});
}
addFilter($(“.intTextBox”);
$('#添加')。单击(函数(e){
var newInput=$('');
addFilter(newInput);
$('#generate').append(newInput);
}
下面的代码将新元素的ID随机化,以避免冲突(这不是一个完美的解决方案;只是一个简单的示例),然后在新元素上应用过滤器
(函数($){
$.fn.inputFilter=函数(inputFilter){
返回此参数。on(“输入键向下键向上键向下键鼠标向下键向下鼠标右键选择上下文菜单下拉”,函数(){
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);
}否则{
此值为“”;
}
});
};
}(jQuery));
函数getRandomInt(最大值){
返回Math.floor(Math.random()*Math.floor(max));
}
//肠段
$(“.intTextBox”).inputFilter(函数(值){
返回/^-?\d*$/.test(值);
});
$('#添加')。单击(函数(e){
让randomId=“intTextBox”+getRandomInt(100000);
$('#generate')。追加(``);
$(`${randomId}`).输入过滤器(函数(值){
返回/^-?\d*$/.test(值);
});
});
添加
添加新元素后,您需要重新应用输入筛选器。此外,您确实不应该在同一页面中创建具有相同ID的多个元素。您可以调用一个人的名字。他们不在房间里。什么都没有发生。他们走进房间。您希望该人知道他们被调用了。这不会发生!Y在元素添加到页面后,您必须对其进行初始化。感谢您的回复,我该怎么做?您引用新元素并调用其上的方法…不起作用,您将其附加到生成元素,而不是输入。您的代码仍然可以生成两个相同的随机数。;)当然。我并不是说这是ID问题的一个永久解决方案,只是为了避免冲突。但在第一次单击时,ID不唯一的可能性为10万分之一:)。我更新了答案,表明这是该示例的解决方案,而不是该特定问题的最终解决方案。感谢您的回复,它对我有效。如果我能给你投赞成票,我会给他们的。因此,如果对你有效,请将答案标记为@JhonMaldonado。