동일한 HTML 요소에 연결된 여러 핸들러

간단한 코드가 있습니다. "시작"버튼을 클릭 할 때마다 고유 한 ID 및 값을 가진 3 개의 새 버튼이 만들어져 내 div에 추가됩니다.동일한 HTML 요소에 연결된 여러 핸들러

클릭 할 때마다 새 버튼에 값이 있음을 경고합니다. 내 문제는 "시작"버튼을 4 번 클릭하면 12 개의 새로운 버튼이 생성되므로 (확인 됨) 새로 만든 버튼을 클릭 할 때마다 여러 번 경고합니다 (예상 한 시간이 아님) .

나는 "Start"버튼을 클릭 할 때마다 새 처리기가 버튼에 첨부된다는 것이 문제라고 생각합니다. 이 문제를 방지하는 방법. 나는() jQuery에 대한 봤어,하지만 많이 도움이되지 않았다. 어떤 도움이라도 대단히 감사합니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script type="text/javascript"> 
var count =1; 

$(document).ready(function() { 

$('#start').on('click', function(e) { 
    var i; 
    for (i=0;i< 3;i++) 
     { 
     $('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>').appendTo('#mydiv');  
     count++; 
     }  

    for(i=1;i<= count;i++) 
     { 
     $(document).on("click", '#Button' + i , function(){ 
       alert ( $(this).attr('value') ); 
      });   
     }    
}); 

}); 
</script> 
</head> 

<body> 

<h1>Test dynamically created button</h1> 

<div id = "mydiv"> 

<button id ="start">START</button> 

</div>      

</body> 
</html>

출처

2016-07-03 Khoi Boo

맞춰주세요. 핸들러를 여러 번 추가했습니다. 이 문제가 해결되었습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
var count = 1; //no need to make it global 

$('#start').on('click', function(e) { 
    var i; 
    for (i=0;i< 3;i++) 
     { 
     $('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>') 
      .click(function(){//add handler when button created... and never more 
       alert (this.value);//or $(this).val() 
      })   
      .appendTo('#mydiv');  
     count++; 
     }  
    /* here you add handlers more and more times 
    for(i=1;i<= count;i++) 
     { 
     $(document).on("click", '#Button' + i , function(){ 
       alert ( $(this).attr('value') ); 
      });   
     } 
    */ 
}); 

}); 
</script> 
</head> 

<body> 

<h1>Test dynamically created button</h1> 

<div id = "mydiv"> 

<button id ="start">START</button> 

</div>      

</body> 
</html>

출처

2016-07-03 18:06:40

(이 순간 것 같은) 당신의 버튼을 DOM에 머물 경우, 왜 당신이 직접이 같은 새로운 추가 버튼에서의 EventListener를 추가하지 않습니다으로,

$('#start').on('click', function(e) { 
    var i; 
    for (i=0;i< 3;i++) { 
     var myNewButton = $('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>'); 
     myNewButton.appendTo('#mydiv'); 
     myNewButton.on("click", function() { 
       alert ( $(this).attr('value') ); 
     }); 
     count++; 
    }    
});

그렇지 않으면 당신은 당신의 질문에 이미 짐작 했었습니다. 당신이 기존의 단추에 모든 청취자를 추가하기 때문에 추가 버튼을 추가 할 수 있습니다.

출처

2016-07-03 17:59:04 lexith

시작 버튼을 클릭 할 때마다 이미 페이지에있는 버튼에 이벤트 핸들러를 만들면 여러 개의 핸들러가 연결되어 있으므로 시작 버튼을 더 많이 클릭 할 수 있습니다.

은 간단하게 문서 (안 클릭에) 준비에 다음 처리기를 추가하고 Button* 같은 ID가있는 경우는 앞으로 버튼의 클릭을 캡처 :

$(document).on('click', '[id^=Button]', function() { 
    alert ($(this).attr('value') ); 
});

으로부터 같은 클릭 핸들러의 생성을 제거를 시작 버튼의 핸들러.

그래서 코드가된다 :

$(document).ready(function() { 
    var count = 0; 

    $(document).on('click', '[id^=Button]', function() { 
     alert ($(this).attr('value') ); 
    }); 

    $('#start').on('click', function(e) { 
     var i; 
     for (i=0;i<3;i++) { 
      $('<button id = "Button' + count + '" value = "' + count + '">Button' + count + '</button>').appendTo('#mydiv');  
      count++; 
     } 
    }); 
});

그래서이 방법, 당신은 두 개의 핸들러를 가지고 시작 버튼 하나, 그리고 다른 모든 Button* 버튼 하나. 새로운 핸들러를 동적으로 추가 할 필요가 없습니다.

출처

2016-07-03 18:03:10 trincot

동일한 HTML 요소에 연결된 여러 핸들러

답변

관련 문제