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

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

당신은 클릭 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();이벤트가 버블 링되지 않은 것이 확실한 경우 건너 뛸 수 있습니다 .

나는 같은 문제가 있었고 모든 것을 시도했지만 작동하지 않았습니다. 그래서 다음 트릭을 사용했습니다.

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

해당 매개 변수가 코드를 작성하는 것보다 null이 아닌지 확인합니다. 따라서 함수가 두 번째로 트리거되면 원하는 것을 표시합니다.

$("#id").off().on("click", function() {

});

나를 위해 일했습니다.

$("#id").off().on("click", function() {

});

두 번 이상 발생하는 함수에서 element.click을 바인딩하면 대기열에 추가되므로 다음에 클릭하면 바인딩 함수가 실행 된 횟수만큼 트리거됩니다. 신참 실수는 아마 내쪽에 있지만 도움이되기를 바랍니다. TL, DR : 한 번만 발생하는 설정 기능에 대한 모든 클릭을 바인딩해야합니다.

Nick이 말하려는 것처럼 외부의 무언가가 이벤트를 두 번 트리거합니다. 이를 해결하려면 event.stopPropagation ()을 사용하여 부모 요소가 버블 링되지 않도록해야합니다.

$('button').click(function(event) {
    event.stopPropagation();
});

이게 도움이 되길 바란다.

제 경우에는 이런 식으로 변경 명령을 사용했습니다.

$(document).on('change', '.select-brand', function () {...my codes...});

그리고 나는 방법을

$ ( '. select-brand'). on ( 'change', function () {... my codes ...});

그리고 그것은 내 문제를 해결했습니다.

버튼이 제출 버튼이되는 것을 원하지 않는 한, 문제를 해결할 항목 제거로 코딩하십시오. 버튼 요소의 유형을 지정하지 않으면 기본적으로 제출 버튼이되어 식별 한 문제가 발생합니다.

Stepan의 답변과 관련이 있습니다.

내 경우에는, 내가 모두 가지고 input와 label내에서 .click()수신기를.

난 그냥 교체 label에 div, 일했다!

AngularJS를 사용하는 경우 :

AngularJS를 사용하고 있고 jQuery 클릭 이벤트가 INSIDE THE CONTROLLER 인 경우 Angular의 프레임 워크 자체에 의해 방해를 받고 두 번 실행됩니다. 이 문제를 해결하려면 컨트롤러에서 빼내고 다음을 수행하십시오.

// Make sure you're using $(document), or else it won't fire.
$(document).on("click", "#myTemplateId #myButtonId", function () {
   console.log("#myButtonId is fired!");
   // Do something else.
});

angular.module("myModuleName")
   .controller("myController", bla bla bla)