sourcecode

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

codebag 2023. 10. 30. 20:57
반응형

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

링크 요소를 설정하고 jQuery에서 클릭 이벤트를 호출했는데 클릭 이벤트가 두 번 호출되고 있으니 jQuery의 코드 아래를 참조해주세요.

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

HTML 페이지에 실수로 스크립트를 두 번 포함하지 않았는지 확인합니다.

클릭하기 전에 구속을 해제합니다.

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

당신의 코드에 jquery 스크립트가 두 번 포함되어 있다는 뜻입니다.하지만 이렇게 해보세요.

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

//your code

});

나는 노력했다.e.stopImmediatePropagation(); 이건 제게 도움이 될 것 같네요.

나의 경우 아래 스크립트를 사용하여 문제를 극복하였습니다.

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

off()바인딩된 모든 이벤트의 바인딩을 해제합니다.#id. 만약 당신이 오직 구속을 풀고 싶다면,click이벤트, 그런 다음 사용off('click').

두 번의 클릭 문제에 대한 다소 일반적인 해결책은 다음과 같습니다.

e.stopPropagation()

기능이 끝나면(사용하는 assuming)function(e)즉). 그러면 할 수 .이렇게 하면 이벤트가 버블링되어 함수가 두 번째로 실행되는 것을 방지할 수 있습니다.

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

이렇게 하면 모든 이벤트 처리기가 제거됩니다.

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

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

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

저도 같은 문제가 있었는데, 이 코드를 바꿔보세요.

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

다음 항목에 대해:

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

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

파이어폭스인데도 이건 확실히 버그입니다.저는 위의 답변들을 모두 검색해보았고 결국 SO를 통해 많은 전문가들에 의해 버그로 판명되었습니다.그래서 저는 결국 변수를 이렇게 선언함으로써 이 아이디어를 생각해 냈습니다.

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

    }
});

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

추가하기e.preventDefault();내 기능을 시작했을 때 나는 효과가 있었습니다.

이 코드 조각에는 나쁜 것이 없습니다.@karim이 말한 것처럼 대본의 또 다른 부분입니다.

이거 드셔보세요.

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

이유는 잘 모르겠지만 저는 이 문제를 가지고 있었습니다.

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

제가 변경했을 때.

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

문제가 해결되었습니다.하지만 분명히 내 코드에 뭔가 문제가 있습니다.

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

제거후.delegate-two실행이 두 번 멈췄습니다.두 대표단이 한 페이지에 모이면 이런 일이 발생한다고 생각합니다.

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

제 경우에는 Chrome에서 잘 작동하고 IE에서 전화를 걸었습니다..click() 그게 한. 만약 그것이 당신의 문제라면, 나는 전화를 한 후에, 그것을 반품 false로 고쳤습니다..click()이벤트성

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

부르기unbind내 문제를 해결했습니다.

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

물론 스크립트의 다른 어딘가에서 "클릭" 이벤트가 다른 여러 답변/댓글이 제시하는 것처럼 동일한 요소에 다시 바인딩되고 있습니다.

저도 비슷한 문제가 있었는데 그것을 확인하기 위해 단순히 a를 추가했습니다.console.log다음 토막글과 같이 스크립트에 명령합니다.

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

버튼을 클릭하면 브라우저의 개발자 콘솔에서 아래 이미지와 유사한 것을 얻을 수 있습니다(제가 한 것처럼).click()이벤트가 동일한 버튼에 두 번 바인딩되었습니다.

the developer's console

빠른 패치가 필요한 경우 다른 의견제출자가 제안한 솔루션은off메소드()unbind이벤트 바인딩이 잘 작동하기 전에 바인딩 해제를 위해 jQuery 3.0) 이후로 권장되지 않습니다.

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

안타깝게도, 이것은 임시 패치일 뿐입니다!상사를 행복하게 만드는 문제가 해결되면, 코드를 조금 더 파고들어 "중복 바인딩" 문제를 해결해야 합니다.

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

이 문제에 대한 제 해결책은 jQueryone 함수를 활용하는 것이었습니다. 이 함수는 이벤트가 첫 번째 호출 후 자동으로 바인딩되지 않는다는 예외를 제외하고는 on과 동일합니다.이는 제 사용 사례에는 이상적이었지만, 다른 사용 사례에는 해결책이 되지 않을 수도 있습니다.

여러 항목이 일치하는 선택에 속아서 각각 클릭이 되었습니다.:first도움말:

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

저도 FF에서 이 문제가 있었습니다.하지만 내 꼬리표는 그 다음에<a>태그. 그런데.<a>태그는 아무데도 가지 않고 더블클릭을 했습니다.교환을 했습니다.<a>꼬리표를 붙입니다<span>태그 대신 더블클릭 문제가 사라졌습니다.

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

제가 이 문제에 직면한 이유는$(elem).click(function(){});스크립트는 다음으로 설정된 디브에 인라인으로 배치되었습니다.style="display:none;".

CSS 디스플레이가 블록으로 전환되면 스크립트는 이벤트 수신기를 두 번째로 추가합니다.스크립트를 별도의 .js 파일로 이동했는데 중복 이벤트 수신기가 더 이상 시작되지 않았습니다.

jquery와 함께 로드 페이지에서 이 방법을 사용하면 다음과 같이 적습니다.$('#obj').off('click');클릭 기능을 설정하기 전에 버블이 발생하지 않도록 합니다.저한테는 통합니다.

내 간단한 대답은 클릭 바인딩을 함수로 전환하여 요소의 클릭 한 번으로 호출하는 것이었습니다. - 효과가 있었습니다! 그러나 위의 것들 중 어느 것도 효과가 없었습니다.

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

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

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

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

그러면 간단한 수정은 첫 번째 요소만 선택하여 클릭을 한 번만 트리거하도록 하는 것입니다.

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

같은 문제가 있었습니다.이게 내겐 통했어요

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

누군가에게 도움이 되길 바랍니다.

저의 경우 HTML은 다음과 같이 작성되었습니다.

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

그리고 내 jQuery는 이렇습니다.

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

아무 일도 없는 것 같아서 혼란스러웠습니다.문제는 내부가.shares toggle바깥쪽을 취소할 겁니다.shares toggle.

저는 요소 종류를 변경해서 이 문제를 해결했습니다.버튼 대신 입력을 하는데, 이 문제는 더 발생하지 않습니다.

대신:

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

대체 위치:

<input onclick="doSomthing()" value="click me">

언급URL : https://stackoverflow.com/questions/6731894/click-event-is-calling-twice-in-jquery

반응형