JQuery Double-click on a label

Question

I am using jQuery to create custom radio buttons and I have a problem. When I click on the label associated with the radio, the click events fire twice, if I click only on the radio, it works fine (well, actually, this is not the radio that I click, but the div that wraps the entire input and label). Here is the code:

HTML:

<div id="box"> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem>RADIO1</asp:ListItem> <asp:ListItem>RADIO2</asp:ListItem> <asp:ListItem>RADIO3</asp:ListItem> </asp:RadioButtonList> </div> 

JQuery

 <script type="text/javascript"> $(function () { $('#box').find('input:radio').each(function (i) { var input = $(this); // get the associated label using the input id var label = $('label[for=' + input.attr('id') + ']'); // wrap the input + label in a div $('<div class="custom-radio"></div>').insertBefore(input).append(label, input); var wrapperDiv = input.parent(); // find all inputs in this set using the shared name attribute var allInputs = $('input[name=' + input.attr('name') + ']'); // necessary for browsers that don't support the :hover pseudo class on labels label.hover( function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover checkedHover'); }); //bind custom event, trigger it, bind click,focus,blur events wrapperDiv.bind('updateState', function () { if ($(this)[0].children[1].checked) { allInputs.each(function () { var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent(); curDiv.removeClass('custom-radio-checked'); curDiv.addClass('custom-radio'); }); $(this).toggleClass('custom-radio custom-radio-checked'); } else { $(this).removeClass('custom-radio-checked checkedHover checkedFocus'); } }) .trigger('updateState') .click(function () { console.log('click'); }) .focus(function () { label.addClass('focus'); }).blur(function () { label.removeClass('focus checkedFocus'); }); }); }); </script> 

Is there any solution for this behavior?

Answer 1

Try adding:

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

in .bind () or .click (), depending on what you see. Also, add the evt parameter to the function, for example function(evt) {...

Answer 2

I tried to add the solution above by adding:

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

but does not work. However, adding the following:

 evt.stopImmediatePropagation(); 

solved a problem!:)

Answer 3

Bind a click event to an input, not a label. When the label is pressed, the event will still occur, because, as Dustin noted, clicking on the label causes a click on the tab. This will allow the shortcut to maintain normal functionality.

 $('input').click(); 

Instead

 $('label').click(); 

Answer 4

If you are trying to use an external container as a click element, you can also let the events bubble naturally and check for the expected element in your click handler. This script is useful if you are trying to create a unique click area 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> 

Answer 5

To resolve this simple method, remove the "for" attribute on the shortcut. Clicking on the label will also cause a click on the related item. (which in your case fires the click event twice.)

Good luck.

Answer 6

The best answer is hidden inside comments:

in fact, you should even bind change to the switch, since the label text is clickable - they do not always press the switch itself. - Chowy December 12, 13 at 1:45

This fiddle illustrates that all other solutions - stopPropagation , stopImmediatePropagation , preventDefault , return false - either do not change anything or destroy the functionality of the flag / radio). It also shows that this is a vanilla JavaScript problem, not a jQuery problem.

EDIT: Another working solution that I just found in another thread is onclick to the input, not to the label. Updated violin .

Answer 7

I usually use this syntax

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

instead

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

Answer 8

Problem with e.preventDefault (); this stops the click of the shortcut from checking the switch.

A better solution would be to simply add a verified check like this:

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

Answer 9

My problem is a little different since evt.stopPropagation();evt.preventDefault(); not working for me, I just add return false; in the end, then it works.

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

Answer 10

In my case, the problem was that I had a click event in the function and the function was executed twice .... each function execution creates a new click event. -facepalm-

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

Answer 11

Try putting your entry tag outside the trigger element, because the label label emulates a click, so you will always have more than one call.

Answer 12

I had the same problem because I put my radio in a shortcut like this with a handler attached to radio_div. Removing a nested label resolved the issue.

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

Answer 13

I tried adding a solution.

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

but it didn’t work.

Adding

 evt.stopImmediatePropagation(); 

solved a problem! :)

Answer 14

The label calls the radio / flag to check.

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

This prevents especially the label to cause this behavior.

Answer 15

Just wanted to listen here, I use WooCombinator in WordPress WooCommerce, which uses links that look like buttons to select options, not the default. I would like to execute some jQuery code on selected options, and many of the answers here did not stop the bubbling effect.

Yoshyosh's comment about trying to use mouseup instead of clicking works like a charm, I can't believe I didn't think about it! Thank yoshyosh