program tip

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

radiobox 2020. 8. 8. 12:18
반응형

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').


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

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

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

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

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

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

e.stopPropagation()

at the end of your function (assuming you use function(e) that is). This prevents the event from bubbling up which could lead to a second execution of the function.


I had the same problem, but you can try changing this code

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

to this:

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

For me, this code solved the problem. But take care not to accidentally include your script twice in your HTML page. I think that if you are doing these two things correctly, your code will work correctly. Thanks


please try this

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

This is definitely a bug specially while it's FireFox. I searched alot tried all the above answers and finally got it as bug by many experts over SO. So, I finally came up with this idea by declaring variable like

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

    }
});

In this way it first checks rather the function was previously called or not.


Adding e.preventDefault(); at the start of my function worked for me.


This is an older question, but if you are using event delegation this is what caused it for me.

After removing .delegate-two it stopped executing twice. I believe this happens if both delegates are present on the same page.

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

this snippet of code contains nothing bad. It's another part of your script as @karim told


In my case, it was working fine in Chrome and IE was calling the .click() twice. if that was your issue, then I fixed it by return false, after calling the .click() event

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

Calling unbind solved my problem:

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

I got tricked by a selection matching multiple items so each was clicked. :first helped:

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

I too had this issue on FF. My tag was however bound to an <a> tag. Though the <a> tag wasn't going anywhere it still did the double click. I swapped the <a> tag for a <span> tag instead and the double click issue disappeared.

Another alternative is to remove the href attribute completely if the link isn't going anywhere.


I faced this issue because my $(elem).click(function(){}); script was placed inline in a div that was set to style="display:none;".

When the css display was switched to block, the script would add the event listener a second time. I moved the script to a separate .js file and the duplicate event listener was no longer initiated.


When I use this method on load page with jquery, I write $('#obj').off('click'); before set the click function, so the bubble not occurs. Works for me.


My simple answer was to turn the click bind into a function and call that from the onclick of the element - worked a treat! whereas none of the above did


I am not sure why but I had this problem with

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

When I changed it to

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

Problem was solved. But definitely something wrong in my code.


Had the same problem. This worked for me -

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

Hope this helps someone.


In my case, the HTML was laid out like this:

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

And my jQuery was like this:

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

It confused me because nothing appeared to be happening. The problem was that the inner .shares toggle would cancel out the outer .shares toggle.


I solved this problem by change the element type. instead of button I place input, and this problem don't occur more.

instesd of:

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

replace with:

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

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

반응형