两个相同的功能,但只有一个火灾
问题描述:
我有两个看似相同的点击处理程序在两个不同的位置的JQuery脚本。但是当我点击相应的按钮时,只有一个被触发。为什么是这样?两个相同的功能,但只有一个火灾
var count = 0;
$("#add").click(function(){
count++;
$("#numberFields").append('<input type="button" id="addThisNumber'+ count +'">');
//Handler 1
$("#numberFields").on('click', "#addThisNumber"+count, function(){
console.log("Handler 1" + count);
});
});
//Handler 2
$("#numberFields").on('click', "#addThisNumber"+count, function(){
console.log("Handler 2" + count);
});
只有'Handler 1'被调用。无法弄清楚原因。两者似乎都完全一样。
答
处理程序2不会触发,因为它是在页面初始化时设置的,因此count将等于零,并且没有#addThisNumber0输入。要解决此问题,您可以执行以下更改:
var count = 0;
$("#add").click(function(){
count++;
$("#numberFields").append('<input class='addThisNumber' type="button" id="addThisNumber'+ count +'">');
//Handler 1
$("#numberFields").on('click', "#addThisNumber"+count, function(){
console.log("Handler 1" + count);
});
});
//Handler 2
$("#numberFields").on('click', ".addThisNumber", function(){
console.log("Handler 2" + count);
});