兩個相同的功能，但只有一個火災

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

});