두 개의 동일한 함수가 하나만 발생합니다.

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

}); 

'처리기 1'만 호출됩니다. 이유를 알아낼 수 없습니다. 둘 다 똑같은 것 같습니다.

Answer 1

페이지 초기화시 처리기가 설정되어 카운트가 0이되고 # addThisNumber0 입력이 없으므로 처리기 2가 실행되지 않습니다. 이 문제를 해결하려면 다음과 같이 변경하십시오.

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

});