两个相同的功能，但只有一个火灾

Question

我有两个看似相同的点击处理程序在两个不同的位置的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'被调用。无法弄清楚原因。两者似乎都完全一样。

Answer 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); 

});