jQuery Button.click() 이벤트가 두 번 트리거됨

jQuery Button.click() 이벤트가 두 번 트리거됨

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

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

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

이 버튼을 클릭하면 알림이 두 번 나타납니다.이 특정한 버튼뿐만 아니라 제가 만드는 모든 버튼이 있습니다.

내가 뭘 잘못하고 있는 거지?

그 경우 우리는 다음과 같이 할 수 있습니다.

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

처음에 이벤트가 두 번 발생했는데 페이지가 새로 고쳐지면 네 번 발생합니다.많은 시간이 지난 후에야 구글 검색으로 알게 되었습니다.

JQuery UI 아코디언 위젯을 사용하기 시작하기 전까지는 코드가 처음에는 작동하고 있었다고 말해야 합니다.

현재 코드가 작동합니다. 여기서 시도해 보십시오: http://jsfiddle.net/s4UyH/

다른 것을 트리거하는 예제 외부의 무언가가 있습니다. 다른 핸들러도 트리거하는 다른 핸들러가 있는지 확인합니다.click그 요소에 대한 사건.

이상한 행동을 경험하기도 했습니다.그래서 저는 "거짓으로 돌려주세요"가 속임수를 썼습니다.

$( '#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에 특정된 것이 아니며, native listener는 펜에서와 마찬가지로 2배 트리거됩니다.

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

1. 스크립트를 동일한 html 파일에 두 번 이상 포함했습니다.
2. 이벤트 수신기를 두 번 추가했습니다(예: 사용).onclick요소에 속성을 부여하고 jquery도 사용합니다.
3. 이벤트는 어떤 상위 요소에 의해 거품이 일게 됩니다.(사용을 고려할 수 있습니다.event.stopPropagation).
4. 사용하는 경우template inheritance에 있는 것Django, 아마도 당신은 스크립트를 둘 이상의 파일에 포함시켰을 것입니다. 둘 이상의 파일은 함께 결합되어 있습니다.include아니면extend템플릿 태그
5. 사용하시는 경우Django템플릿, 다른 내부에 잘못 배치했습니다.

그래서 당신은 그것들을 찾아서 중복 수입을 제거해야 합니다.그것은 최선의 일입니다.

또 다른 해결책은 모든 것을 제거하는 것입니다.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() {

});

닉이 말하려고 했던 것처럼 외부에서 무언가가 사건을 두 번 촉발시키고 있습니다.이를 해결하려면 event.stopPropagation()을 사용하여 상위 요소가 버블링하지 않도록 해야 합니다.

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

도움이 되었으면 좋겠습니다.

저 같은 경우는 변경 명령을 이렇게 사용하고 있었습니다.

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

그리고 나서 나는 방법을 바꾸었습니다.

$(.'select-brand'). ('change', 함수() {...my code...});

내 문제를 해결해 줬습니다

@Stephan's Answer 관련.

저 같은 경우에는 두 가지를 다 가지고 있습니다.input그리고.label내 안에.click()듣는 사람

방금 교체했습니다.label.div, 됐습니다!

두 번 이상 발생하는 함수에서 element.click을 바인딩하면 queue가 되므로 다음에 클릭하면 바인딩 함수가 실행된 횟수만큼 트리거됩니다.새로 온 실수는 아마 제 쪽에 있겠지만 도움이 되었으면 좋겠습니다.TL,DR: 한 번만 실행되는 설정 기능에 대한 모든 클릭을 바인딩해야 합니다.

단추를 제출 단추로 사용하지 않으려면 문제를 해결할 항목 제거로 코드화합니다.단추 요소의 유형을 지정하지 않으면 기본적으로 제출 단추로 설정되어 식별한 문제가 발생합니다.

Angular를 사용하는 경우JS:

Angular를 사용하는 경우JS와 당신의 jQuery 클릭 이벤트는 INSIDE THE CONTROLER로, 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)

또 하나의 가능성은 "isTrusted" 값에서 두 이벤트가 다르다는 것입니다.

저는 방금 이 문제에 부딪혔습니다.디버그를 조금 해본 결과, 두 이벤트가 "isTrusted" 값이 다르다는 것을 알게 되었습니다.

---

조건:

전화해봤어요.element.click()다른 InputBox의 "keydown" 이벤트 핸들러에서.후,element한 이고 다른 합니다입니다. 하나는 "isTrusted:true"이고 다른 하나는 "isTrusted:false"입니다.

MDN(https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted), 에 의하면,isTrusted이벤트가 사용자 triggered(참)인지 또는 프로그램으로 실행(false)되는지 확인하는 데 사용됩니다.

---

솔루션:

a. 이중 화재를 더 잘 처리하고 사용 사례에서 주별로 두 번째 이벤트를 차단합니다.

b. 사용자 트리거를 사용할지, 프로그램을 실행할지 선택합니다.

c. 클릭()을 사용하지 않습니다.클릭 핸들러를 함수로 만들고 둘 다 이벤트 핸들러에서 함수를 직접 호출합니다.

멘토의 도움을 받아 똑같은 문제에 직면해 있었습니다.

$('#button_id').click($.debounce(250, function(e) {
     e.preventDefault();
     var cur = $(this);
     if ($(cur).hasClass('btn-primary')) {
          //do something
     } else {
          // do something else 
     }
 }));

버튼을 클릭했을 때의 myIssue는 Class가 true로 즉시 표시되고 다른 부분은 debounce를 사용하여 수정되었습니다.

오래된 프로젝트를 진행중입니다.

나는 요소에 라디오 입력이 있을 때 그리고 클릭이 라디오 입력을 선택할 때 jQuery 클릭이 두 번 트리거 되어 Js.

페이지의 어느 지점을 클릭하면 두 번 클릭 이벤트가 발생하기 때문에 이 문제가 있었습니다.

소스코드를 확인해보니 jQuery 라이브러리가 최종 페이지에 대해 두번 정의된 원인을 찾았습니다!

1. ASP의 마스터 페이지에 표시됩니다.NET웹폼프로젝트

2. 있었습니다.ScriptManager의 정의Application_Start의 경우Global.asax파일.

언급URL : https://stackoverflow.com/questions/3070400/jquery-button-click-event-is-triggered-twice