jQuery Click fires twice when clicking on label

I tried adding the solution above by adding:

evt.stopPropagation();
evt.preventDefault();

but didn't work. However adding this:

evt.stopImmediatePropagation();

solved the problem! :)

Bind the click event to the input rather than the label. When the label is clicked - the event will still occur because, as Dustin mentioned, a click on the label triggers a click on the input. This will allow the label to hold its normal functionality.

$('input').click();

Instead of

$('label').click();

If you're trying to use an outer container as a click element you can also let the events bubble naturally and test for the expected element in your click handler. This scenario is useful if you're trying to style a unique click zone for a form.

<form>
<div id="outer">
    <label for="mycheckbox">My Checkbox</label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/>
</div>
</form>
<script>
$('#outer').on('click', function(e){
    // this fires for #outer, label, and input
    if (e.target.tagName == 'INPUT'){
        // only interested in input
        console.log(this);
    }
});
</script>

To fix this the easy way, remove the "for" attribute on the label. A click on the label will also trigger a click on the associated element. (which in your case is firing your click event twice.)

Good luck

I usually use this synthax

.off('click').on('click', function () { console.log('click'); })

instead of

.click(function () { console.log('click'); })

I have tried by adding solution.

evt.stopPropagation();
evt.preventDefault();

but didn't work.

By adding

evt.stopImmediatePropagation();

solved the problem! :)

Best answer is hidden inside comments:

you should actually bind to change even on the radio button since the text of a label is clickable -- they don't always click the radio button itself. – chovy Dec 12 '13 at 1:45

This fiddle illustrates that all the other solutions – stopPropagation, stopImmediatePropagation, preventDefault, return false – either change nothing or destroy the checkbox/radio functionality). It also illustrates that this is a vanilla JavaScript problem, not a jQuery problem.

EDIT: Another working solution that I just found in another thread is to bind the onclick to the input rather than the label. Updated fiddle.

The problem with e.preventDefault(); is it stops the label click from checking the radio button.

A better solution would be to simply add a "is checked" quick check like so:

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
  **All the code you want to have happen on click**
  }
)};

My problem is a bit different, as the evt.stopPropagation();evt.preventDefault(); doesn't work for me, I just add return false; in the end, then it works.

$("#addressDiv").on("click", ".goEditAddress", function(event) {
    alert("halo");
    return false;
});

In my case the problem was that i had the click event in a function and the function was executed twice.... every execution of the function creates a new click event. -facepalm-

after moving the click event outside the function, everything worked as expected! :)

Try put your input tag outside trigger element, because label tag emulates click, so you will have always more than one call.

I had the same issue because I had nested my radio inside the label like this with the handler attached to radio_div. Removing the nested label fixed the issue.

<div id="radio_div">
    <label>
       <input type="radio" class="community_radio" name="community_radio" value="existing">
           Add To Existing Community
    </label>
</div>

The label triggers the radio/checkbox to be checked.

if ($(event.target).is('label')){
    event.preventDefault();
}

It prevent especially the label to trigger this behavior.

The click on the label with a for="some-id" attribute triggers a new click, but only if the target exists and is an input. I was not able to solve it perfectly with e.preventDefault() or stuff like that so I did it like this:

For example, if you have this structure and want an event on clicking .some-class

<div class="some-class">
    <input type=checkbox" id="the-input-id" />
    <label for="the-input-id">Label</label>
</div>

What did work was:

$(document)
    .on('click', '.some-class', function(e) {
        if(
            $(e.target).is('label[for]')
            &&
            $('input#' + $(e.target).attr('for')).length
        ) {
            // This will trigger a new click so we are out of here
            return;
        }

        // else do your thing here, it will not get called twice
    })
;

Yes, solved it by adding, https://www.w3schools.com/jsref/event_stopimmediatepropagation.asp

e.stopImmediatePropagation(); < - this stop multiple fires ⌚

$(document).on("click",".SaveGSTPayableAndRefund",function(e){
   e.stopImmediatePropagation();
})

Thanks :)

$(document).on('click','.class',function() {
    alert('abc')
})

In my case it fired 2 times because I included this code 2 times like assets/js/test.js 2 times.