click () 이벤트가 jquery에서 두 번 호출됩니다.


113

링크 요소를 설정하고 jquery에서 클릭 이벤트를 호출했지만 클릭 이벤트가 두 번 호출됩니다. 아래 jquery 코드를 참조하십시오.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

조언하십시오.

감사.


2
문제는 아마도 스크립트의 다른 곳에서 발생했을 것입니다.
— karim79 2011

3
이것을 두 번 호출 할 곳을 찾을 수 없다면 click (...) 전에 unbind ( 'clik')를 만드십시오.
— regilero 2011

regilero : 정확히, 전체 코드베이스는 매우 큽니다. 바인딩 해제는 어디에 두어야합니까?
— domlao

2
당신은 기능이 클릭 이벤트에 바인딩되는 것을 감지 할 수 있습니다 : stackoverflow.com/questions/570960/...
— 안 팜에게

답변:


229

HTML 페이지에 실수로 스크립트를 두 번 포함하지 않았는지 확인하고 확인하십시오.


1
이것이 제 경우의 문제였습니다. 내 클릭 이벤트가 깜짝 놀랐습니다. 포인터 주셔서 감사합니다. :) +1
— Tahir Akram 2011 년

22
나는 방금이 해결책을보고 웃으며 "나는 그렇게 할만큼 어리석지 않다"고 생각했다. 내가 정확히이 일을 한 것으로 밝혀졌다. 감사합니다.
— JazzyP 2014 년

1
감사! 이것은 나에게도 문제가되었다. laravel 블레이드 템플릿과 동일한 섹션 이름에서 @parent를 호출하는 중첩 템플릿에있었습니다. 죄송합니다. 다시 한 번 감사드립니다!
— Phillip Harrington

1
이 팁에 감사드립니다. 20 시간 넘게이 문제로 고생했고이 팁을 통해 올바른 길로 안내했습니다. 나는 MVC ScriptBundles를 사용하고 있었지만 스크립트 파일에 직접 연결했고 이것은 이벤트를 복제했습니다
— Manish

ㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ
— Julian

76

클릭하기 전에 바인딩을 해제하십시오.

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

1
$ ( "# link_button"). unbind (); 또는 ... 경우에 한 번 이상, 코드를 읽을 경우 얼마나 많은 시간을 확인하는 간단한 테스트를 만들
— 시스템 데이터 베

3
그것은 실제 해결책이 아니라 매번 즉석에서 오류를 수정하는 것입니다. 그것은 트릭을 수행하고 나를 도왔지만 실제 문제를 찾아 영구적으로 수정해야합니다.
— Juan Ignacio 2011 년

1
제 경우에는 정말 유용합니다. 일부 아약스 호출 후에 이벤트와 함께 메소드를 여러 번 호출해야하기 때문에 오버 클릭되기 시작합니다 (이 단어가 존재하는지 모르겠습니다). 제 상황에서는 해결책을 의미합니다.
— Thiago C. S Ventura

한 번만 포함 된 스크립트로 문제를 수정했습니다. 감사합니다!
— K. Rhoda

49

코드에 jquery 스크립트가 두 번 포함되었음을 의미합니다. 그러나 이것을 시도하십시오 :

$("#btn").unbind("click").click(function(){

//your code

});


18

제 경우에는 아래 스크립트를 사용하여 문제를 극복했습니다.

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

off()에 바인딩 된 모든 이벤트의 바인딩을 해제합니다 #id. click이벤트 만 바인딩 해제하려면 을 사용하십시오 off('click').


8

.on ()을 호출하기 직전에 .off ()를 호출하기 만하면됩니다.

이렇게하면 모든 이벤트 핸들러가 제거됩니다.

$(element).off().on('click', function() {
// function body
});

등록 된 '클릭'이벤트 핸들러 만 제거하려면 :

$(element).off('click').on('click', function() {
// function body
});

7

두 번의 클릭 문제에 대한 다소 일반적인 해결책은

e.stopPropagation()

함수의 끝에서 (사용한다고 가정 function(e)). 이렇게하면 이벤트가 버블 링되어 함수의 두 번째 실행으로 이어질 수 있습니다.


6

같은 문제가 있었지만이 코드를 변경해 볼 수 있습니다.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

이에:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

저에게는이 코드가 문제를 해결했습니다. 그러나 HTML 페이지에 실수로 스크립트를 두 번 포함하지 않도록주의하십시오. 이 두 가지를 올바르게 수행하면 코드가 올바르게 작동 할 것이라고 생각합니다. 감사


3

이것을 시도하십시오

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

나는 "live"를 "on"으로 변경했고 그것은 나를 위해 작동하는 것 같다. 따라서 버튼을 클릭 할 때만 이벤트가 발생합니다.
— Vikneshwar

이 자리에 있습니다.
— LargeTuna

3

이것은 FireFox 인 동안 특히 버그입니다. 나는 위의 모든 답변을 많이 시도했고 마침내 많은 전문가들에 의해 버그로 잡혔습니다. 그래서 마침내 다음과 같은 변수를 선언하여이 아이디어를 생각해 냈습니다.

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

이런 식으로 먼저 함수가 이전에 호출되었는지 여부를 확인합니다.



3

이것은 오래된 질문이지만 이벤트 위임을 사용하는 경우 이것이 원인입니다.

제거 후 .delegate-two두 번 실행이 중지되었습니다. 두 대리자가 같은 페이지에 있으면 이런 일이 발생한다고 생각합니다.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

2

이 코드 조각에는 나쁜 것이 없습니다. @karim이 말했듯이 스크립트의 또 다른 부분입니다.


2

제 경우에는 Chrome에서 잘 작동하고 IE는 .click()두 번 호출 했습니다. 그것이 귀하의 문제라면 .click()이벤트를 호출 한 후 false를 반환하여 수정했습니다.

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

2

전화로 unbind문제가 해결되었습니다.

$("#btn").unbind("click").click(function() {
    // your code
});

2

이유는 모르겠지만이 문제가 발생했습니다.

$(document).on("click", ".my-element", function (e) { });

내가 그것을 바꿀 때

$(".my-element").click(function () { });

문제가 해결되었습니다. 그러나 확실히 내 코드에서 뭔가 잘못되었습니다.


이것은 laravel에서 나를 위해 일했습니다.이 문제의 원인을 모릅니다
— khan Farman

1

여러 항목과 일치하는 선택에 속아 각각을 클릭했습니다. :first도움 :

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

1

나도 FF에서이 문제가 있었다. 그러나 내 태그는 태그에 바인딩되었습니다 <a>. 비록 <a>태그는 아무데도 안되었다 여전히 더블 클릭을했다. 대신 <a>태그를 태그로 바꾸었고 <span>더블 클릭 문제가 사라졌습니다.

또 다른 대안은 링크가 아무데도 가지 않는 경우 href 속성을 완전히 제거하는 것입니다.


이것은 실제로 질문에 대한 답이 아닙니다. 다른 질문이있는 경우 질문하기를 클릭하여 질문 할 수 있습니다 . 평판 이 충분하면이 질문에 더 많은 관심을 끌기 위해 현상금 을 추가 할 수도 있습니다 .
— Sean Patrick Floyd

@SeanPatrickFloyd : 사실, 그것은 대답입니다. 위험 신호를 제기하도록 공식화 되었더라도.
— Deduplicator

1

내 $(elem).click(function(){});스크립트가으로 설정된 div에 인라인으로 배치 되었기 때문에이 문제에 직면 했습니다 style="display:none;".

css 디스플레이가 차단으로 전환되면 스크립트는 이벤트 리스너를 두 번째로 추가합니다. 스크립트를 별도의 .js 파일로 옮겼고 중복 이벤트 리스너가 더 이상 시작되지 않았습니다.


1

jquery로로드 페이지에서이 방법을 사용 $('#obj').off('click');하면 클릭 기능을 설정하기 전에 작성 하므로 버블이 발생하지 않습니다. 나를 위해 작동합니다.


1

내 간단한 대답은 클릭 바인딩을 함수로 바꾸고 요소의 onclick에서 호출하는 것이 었습니다. 위의 어느 것도


0

이벤트가 두 번 또는 세 번 이상 전화하는 경우 도움이 될 수 있습니다.

이와 같은 것을 사용하여 이벤트를 트리거하는 경우…

$('.js-someclass').click();

… 그런 다음 .js-someclass페이지에있는 요소 의 수에주의를 기울이십시오 . 한 번이 아니라 모든 요소에 대해 클릭 이벤트를 트리거하기 때문입니다.

간단한 해결 방법 은 첫 번째 요소 만 선택하여 클릭을 한 번만 트리거하는 것입니다 . 예 :

$('.js-someclass:first').click();

0

스크립트의 다른 곳에서 "클릭"이벤트는 다른 여러 답변 / 댓글이 제안하는 것처럼 동일한 요소에 다시 바인딩됩니다.

비슷한 문제가 있었고이를 확인하기 위해 console.log다음 스 니펫과 같이 스크립트에 명령을 추가했습니다 .

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

버튼을 클릭 할 때 브라우저의 개발자 콘솔에서 아래 이미지와 유사한 내용이 표시되면 (내가했던 것처럼) click()이벤트가 동일한 버튼에 두 번 바인딩 된 것입니다.

개발자 콘솔

빠른 패치가 필요한 경우 다른 해설자가 제안한 off방법 (btw unbind는 jQuery 3.0부터 더 이상 사용되지 않음)을 사용하여 이벤트를 바인딩 해제 (재) 바인딩하기 전에 제안한 솔루션 이 잘 작동 하며이 방법을 권장합니다.

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

불행히도 이것은 임시 패치 일뿐입니다! 상사를 행복하게 만드는 문제가 해결되면 코드를 좀 더 자세히 살펴보고 "중복 된 바인딩"문제를 해결해야합니다.

물론 실제 솔루션은 특정 사용 사례에 따라 다릅니다. 예를 들어 제 경우에는 "컨텍스트"라는 문제가있었습니다. 문서의 특정 부분에 적용된 Ajax 호출의 결과로 내 함수가 호출되었습니다. 전체 문서를 다시로드하면 실제로 "페이지"및 "요소"컨텍스트가 모두 다시로드되어 이벤트가 요소에 두 번 바인딩되었습니다. .

이 문제에 대한 나의 해결책은 jQuery를 활용하는 것이었다 하나 와 동일한 기능 에 이벤트가 첫 번째 호출 후 자동으로 결합되지 않은 것을 제외한다. 그것은 내 사용 사례에 이상적이지만 다시 다른 사용 사례의 솔루션이 아닐 수도 있습니다.


-1

같은 문제가있었습니다. 이것은 나를 위해 일했습니다-

$('selector').once().click(function() {});

이것이 누군가를 돕기를 바랍니다.


나에게 오류가 발생합니다 ... 게다가 그것은 더러운 해결책입니다-함수가 두 번 이상 실행되고 있으며 해결책은 다른 곳에 배치하고 console.log ()를 사용하여 사물을 모니터링하는 것입니다.
— tylerl

-1

제 경우에는 HTML이 다음과 같이 배치되었습니다.

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

그리고 내 jQuery는 다음과 같습니다.

jQuery('.share').toggle();

아무 일도 일어나지 않는 것 같아서 혼란 스러웠습니다. 문제는 내부 .shares toggle 가 외부 .shares를 상쇄 한다는 것 toggle입니다.


-1

요소 유형을 변경하여이 문제를 해결했습니다. 버튼 대신 입력을 배치하면이 문제가 더 이상 발생하지 않습니다.

instesd :

<button onclick="doSomthing()">click me</button>

다음으로 교체 :

<input onclick="doSomthing()" value="click me">
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.