jquery binding click for label firing twice

Question

When i added one select into label and binding for click event, jquery fires twice.

html:

<label class="lol">
    <div>
        bla
    </div>
    <div style="display:none;">
        <select></select>
    </div>
</label>

javascript:

$("label.lol").on({
    click : function ()
    {
        alert(1);
    }
})

How can i fix this bug without adding "for" attribute to labels?

interesting. Looks like you can only use phrasing content inside a label tag which doesn't include divs. [Source](https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content) — Seain Malkin, Feb 08 '13 at 15:30
it works as expected when you select only the first div inside `$("label.lol div:first")` — sofl, Feb 08 '13 at 15:32
@Lucas: Indeed. See [W3C](http://www.w3.org/TR/html5/forms.html#the-label-element). A label should contain [Phrasing content](http://www.w3.org/TR/html5/dom.html#phrasing-content-1) which doesn't include `div`. — Matt Burland, Feb 08 '13 at 15:38
@MattBurland what Lucas is saying? It is the same as you are. — Muhammad Talha Akbar, Feb 08 '13 at 15:39
@AspiringAqib: I know. That's what `indeed` means. I provided the links as to why. — Matt Burland, Feb 08 '13 at 15:41
@AspiringAqib Matt simply provided a resource to learn more about proper use of elements :D — Lucas, Feb 08 '13 at 15:47

score 4 · Accepted Answer · answered Feb 08 '13 at 15:36

4

I know there are already many answers to this question but are vague.

$("label.lol").on({
    click : function ()
    {
        alert(1);
        return false;
    }
});

Ok, Everyone appreciated. Problem Solved. But Question arises Why return false;.

Answer In Simple Words: It is a way of telling computer that return from the function, the task i gave to you is completed. No more Mess now.

answered Feb 08 '13 at 15:36

Muhammad Talha Akbar

9,952
6
38
62

click event propagates or bubble up the DOM which makes it to run twice. One on its own and other select tag (or any other form elements) in between it. You can see this fiddle: http://jsfiddle.net/5QAS2/ **What is in it?** See that when `input` or any other tag is in between label element, the function runs twice. And does not when form elements are not in it. I haven't done a research on this. So, can't explain more or can't say that it is a bug or something. Yeah! – Muhammad Talha Akbar Feb 09 '13 at 08:02
And another thing is that if it should alert thrice if there are two inputs. Which it does not.See: http://jsfiddle.net/5QAS2/1/ So, i think its a bug. We can't say it is bubbling the DOM. Well, I suggest you to `return false;` when ever you write program. – Muhammad Talha Akbar Feb 09 '13 at 08:09

score 2 · Answer 2 · answered Feb 08 '13 at 15:26

2

You could try using the label's "for" attribute to link it to a select outside of it. See my example

<label for="test" class="lol">
    <div>
        bla
    </div>
</label>

<div style="display:none;">
    <select id="test"></select>
</div>

http://jsfiddle.net/d8Ax7/1/

answered Feb 08 '13 at 15:26

Roger C

338
1
5

quote: "How can i fix this bug without adding "for" attribute to labels?" – sofl Feb 08 '13 at 15:27
well, ahh man are you updating your answer ? Its good. And @sofl use `return false;` always in your code. – Muhammad Talha Akbar Feb 08 '13 at 15:30
Don't mean to go off the course, but I think Roger C has the correct approach. Why wouldn't someone use the 'for' attribute, since this is it's purpose. Just a thought... – Danilo Radenovic Feb 08 '13 at 15:47

score 0 · Answer 3 · answered Feb 08 '13 at 15:24

$("label.lol").off("click").on(//...

but if it's firing twice it surely means you have bound it twice so using .off is more a hack than the best solution to your problem which would be to understand how you end up binding twice this event... & surely the code you show doesn't explain this double bondage

edit : & in your fiddle it does indeed trigger only once...

score 0 · Answer 4 · answered Feb 08 '13 at 15:27

This way it works too but I'm don't fully understand what you're trying to do... And a label should only contain a label text for the select and not contain the select himself..

   $("label.lol div:first").on({
        click : function ()
        {
            alert(1);
        }
    })

score 0 · Answer 5 · edited May 23 '17 at 11:52

0

There are two options when overriding the click check out this stack overflow question for greater detail, but to sum it up try this...

$("label.lol").click(function () {
        alert(1);
        return false;
});

edited May 23 '17 at 11:52

Community

1
1

answered Feb 08 '13 at 15:29

cameronjchurch

410
3
7

score 0 · Answer 6 · answered Feb 08 '13 at 15:29

0

Your markup is horrible.. Your problem is that jquery is doing the click event on each div inside your label function - means twice. You should clean ur markup and ask the div you want to be clickable directly. Else use :first to make sure the event is only fired once:

$('.lol div:first').click(function ()
{
    alert("1");
})

answered Feb 08 '13 at 15:29

gulty

1,068
1
8
14

You are right about the markup. But the event fires on the label. Try replacing the `alert("1")` with `alert(this)` and you will see that the it shows `[object HTMLLabelElement]` twice. – fragmentedreality Feb 08 '13 at 15:45

score 0 · Answer 7 · answered Feb 08 '13 at 15:31

0

You should add e.preventDefault();

$("label.lol").on({
  click : function (e)
  {
    alert(1);
    e.preventDefault();
  }
});

answered Feb 08 '13 at 15:31

Kaeros

1,138
7
7

score 0 · Answer 8 · answered Feb 08 '13 at 15:44

your problem is with your distinction between elements.e.g you should select the first child of label with :first-child selector, or give it an id:

HTML:

<label class="lol">
    <div id="first-child">
        bla
    </div>
    <div style="display:none;">
        <select></select>
    </div>
</label>

JS:

$("#first-child").on('click',function (){
        alert(1);
});

http://jsfiddle.net/d8Ax7/5/

score 0 · Answer 9 · answered Feb 08 '13 at 16:01

Try to filter with CSS: Add an intermediate class clicked that prevents the second alert (or whatever action) and than remove the .clicked to be ready for the next round.

$("label.lol").on({
    click : function ()
    {
        if (! $(this).hasClass('clicked'))
            alert(1);
        $(this).toggleClass('clicked');
    }
})

jquery binding click for label firing twice

9 Answers9