jQuery를이 요소를 복제하고 그것의 아이 버튼 클릭 이벤트가 여러 번

Question

내가 clone에 테이블 행을 몇 가지 코드가 발생합니다.

click 이벤트는 다음과 같이이다 :

$('body').on('click', '.edit, .cancel', function(e) 
{ 
    e.preventDefault(); 

    // Do something here... 
}); 

사용자는 대화 상자의 닫기 버튼을 클릭 한 후 나는 $(".widget-container").remove();와 테이블의 컨테이너를 제거합니다. 이후에 사용자가 대화 상자를 다시 열면이 컨테이너를 다시 만들 수 있습니다.이 경우 컨테이너와 테이블이 다시 DOM에 삽입됩니다.

이

내가 대화를로드하는 데 사용하는 코드이며 HTML의 :

$.ajax({ 
     url: 'getDialogUrl', 
     type: 'GET', 
     cache: false, 
     success: function(html) 
     { 
      $(html).insertAfter('.someOtherExistingDOMElement'); 

      .... 
     } 

문제는이 두 번째 시간에 호출 될 때 clone.find('.edit').click();가 두 번 click 이벤트를 발생한다는 것입니다. 대화 상자를 닫고 다시 열면 클릭이 3 번 발생합니다.

remove은 DOM에서 제거 된 요소에 바인딩 된 모든 이벤트를 지울 것이라고 생각했습니다. 이런 일은 일어나지 않은 것 같네요.

내가 잘못 복제 한 것 같습니다. .clone(false)과 .clone(false, false);을 시도했지만 동일한 동작을 유지했습니다.

왜 이런 일이 발생합니까? 내가 여기서 뭘 잘못하고 있는지에 대한 아이디어는?

Answer 1

이 "솔루션 질문을 게시 후 발견"...이 질문은 내가 그것을 해결 도움의 다른 인스턴스이었다

$('body').off().on('click', '.edit, .cancel', function(e) 
{ 
    e.preventDefault(); 

    // Do something here... 
}); 

: 나는 whas이해야했다 무엇

jQuery click events firing multiple times

on() 앞에 off()이 표시됩니다. 이렇게하면 하나의 click 이벤트 만 요소에 바인딩됩니다.

이 answer은 문제를 밝힙니다.

표시 : on 이벤트 핸들러가 실행될 때마다 요소에 대한 다른 처리기가 연결되므로 그 이유는 대화 상자를 닫거나 제거한 다음 다시 열거 나 재 작성했을 때 그 번호만큼 많은 이벤트 처리기를 첨부하게됩니다. 대화가 열리는 시간. :)