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


81

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

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

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

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

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


답변:


66

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

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


28
당신이 맞아요! .click () 앞에 .unbind ( "click")을 넣었습니다. 이제 제대로 작동합니다. 이벤트를 발생시키는 요소를 다시 검색해야합니다. 감사합니다!
user276289

1
동일한 클릭 이벤트를 두 번 바인딩하는 것처럼 들립니다. jQuery는 바인딩을 대기열에 추가하므로 여러 클릭 이벤트를 동일한 요소에 바인딩하면 클릭하면 모두 실행됩니다. 약간의 차이는 클릭 이벤트가 두 번 실행 된 것과 동일한 클릭 이벤트가 요소에 두 번 바인딩 된 것입니다.
MacAnthony 2010-06-18

16
@ user276289-전체 코드가 두 번 이상 실행될 수 있으므로 페이지에 한 번만 포함되어야합니다.
Nick Craver

3
감사합니다 Nick Craver! 그것은 정확히 내 문제였습니다. jQuery 대화 상자에 코드를 인라인했기 때문에 jQuery UI 대화 상자가 렌더링 될 때 다시 실행되었습니다.
James

3
그게 정답입니다. 여러 번 동일한 JS 파일을 두 번로드하면이 버그도 발생합니다.

129

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

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

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

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


8
이 변종은 또한 작동합니다$('.element').unbind("click").on('click', function(e) { ... });
Rosdi 카심에게

내가 찾던 바로 그것. 또한 @RosdiKasim의 의견이 올바른지 확인할 수 있습니다-그것이 제가 사용한 것입니다.
Novocaine 2015

이 ... 덕분에 내가 찾고 5 분 이내에했습니다 답변입니다
Alauddin 아메드

40

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

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

감사합니다! 제 경우에는 이벤트 핸들러의 바인딩을 해제하거나 끌 수 없었지만 단순히 false를 반환하면 효과가있었습니다!
bergie3000

6
이것은 나에게도 효과가 있었지만 그 이유를 알고 싶습니다.
Allen Liu

Noor의 대답을 살펴보십시오.
Arman Petrosyan

1
이것은 나를 위해 일했습니다. 클릭은 두 번 이상 트리거되지 않습니다. 그러나 클릭이 확인란에 바인딩 된 경우 클릭 이벤트에서 선택되지 않습니다.
Rebecca Meritz 2017

19

사용하는 경우

$( document ).ready({ })

또는

$(function() { });

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


1
이 문제를 해결했습니다.
Kvvaradha 19

13

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

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

8

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

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

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

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


그래서, 이것에 대한 수정은 무엇입니까? 이것이 내 시나리오입니다
mars-o

4

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

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


답변에 명백한 # 1을 포함 해 주셔서 감사합니다. 나는 그것이 무슨 일이 일어나고 있는지 깨닫지 못했다는 것을 믿을 수 없습니다. (facepalm)
Josh Coast

3

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

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

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



1

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


1

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

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

이게 도움이 되길 바란다.


이것은 나를 위해 작동하지 않았습니다. 대부분의 요인으로 인해 클릭이 두 번 이상 트리거되었습니다.
Rebecca Meritz 17

1

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

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

그리고 나는 방법을

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

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


0

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


죄송합니다-이상하게 업로드되었습니다. 버튼 태그 안에 type = "button"을 추가하면됩니다.
user2672224

0

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

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

난 그냥 교체 labeldiv, 일했다!


0

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)
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.