[jquery] jQuery Button.click () 이벤트가 두 번 트리거됩니다.

이 코드에 다음과 같은 문제가 있습니다.

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

이 버튼을 클릭하면 경고가 두 번 표시됩니다. 이 특정 버튼뿐만 아니라 내가 만드는 모든 버튼이 있습니다.

내가 도대체 ​​뭘 잘못하고있는 겁니까?



답변

현재 코드가 작동합니다. 여기에서 시도해 볼 수 있습니다. http://jsfiddle.net/s4UyH/

다른 것을 트리거하는 예제 외부에 무언가 .click()있으며click 해당 요소 에서 이벤트를 트리거하는 다른 핸들러도 확인하십시오 .


답변

이 경우 다음을 수행 할 수 있습니다.

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

처음에는 이벤트가 두 번 실행되고 페이지가 새로 고쳐지면 네 번 실행됩니다. 내가 구글 검색으로 알아 내기까지 많은 시간이 지나지 않았다.

또한 JQueryUI 아코디언 위젯을 사용하기 시작할 때까지 코드가 처음에 작동했다고 말해야합니다.


답변

나도 경험 한 이상한 행동. 그래서 나를 위해 “거짓 반환”이 트릭을했습니다.

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });


답변

사용하는 경우

$( document ).ready({ })

또는

$(function() { });

두 번 이상 클릭 기능은 사용되는 횟수만큼 트리거됩니다.


답변

당신은 이것을 시도 할 수 있습니다.

    $('#id').off().on('click', function() {
        // function body
    });
    $('.class').off().on('click', function() {
        // function body
    });


답변

이것은뿐만 아니라 모두를함으로써 트리거 될 수 있습니다 inputlabel 내부에 클릭 리스너를 가진 요소.

당신은 클릭 label클릭 이벤트를 트리거하는, 그리고 뿐만 아니라 온 또 다른 클릭 이벤트 input에 대한 label. 두 이벤트 모두 요소에 버블 링됩니다.

멋진 CSS 전용 토글 펜 : https://codepen.io/stepanh/pen/WaYzzO

참고 : 이것은 jQuery와 관련된 것이 아니며 기본 리스너는 펜에 표시되는 것과 같이 2x 트리거됩니다.


답변

이는 다음과 같은 이유로 발생할 수 있습니다.

  1. 당신은 한 번 이상 스크립트를 포함 동일한 html 파일에
  2. 당신은 한 번 이벤트 리스너를 추가 하여 (예를 들어, onclickjQuery로 또한 요소의 속성과를
  3. 이벤트는 버블 일부 부모 요소까지. (사용을 고려할 수 있습니다 event.stopPropagation).
  4. 에서 template inheritance와 같이 사용하는 경우 또는 템플릿 태그로 함께 결합 된 둘 이상의 파일에 스크립트를 포함 했을 수 있습니다.extendsDjangoincludeextend
  5. 당신이 사용하는 경우 Django템플릿을, 당신은 잘못을 배치 block다른 내부 .

따라서이를 찾아서 중복 가져 오기를 제거해야합니다. 최선의 방법입니다.

또 다른 해결책은 click다음과 같이 스크립트에서 모든 이벤트 리스너를 먼저 제거하는 것입니다.

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

event.stopPropagation();이벤트가 버블 링되지 않은 것이 확실한 경우 건너 뛸 수 있습니다 .