2つの同一の機能が1つのみ発生

Question

2つの異なる場所に2つの一見同じオンクリックハンドラがあるJQueryスクリプトがあります。しかし、それぞれのボタンをクリックすると、1つだけが起動します。どうしてこれなの？

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

}); 

「ハンドラ1」だけが呼び出されます。理由を理解できません。どちらもまったく同じようです。

Answer 1

ハンドラ2は、ページの初期化時に設定されるためカウントされず、＃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); 

});