Why does listener activate twice?

Question

I have the following html:

<ul id="all-terminals">

        <li data-terminal-id="101" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="101">
                <a ...></a>

               ...
            </label>
        </li>

        <li data-terminal-id="100" class="active">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="100">
                <a ..></a>

               ...
            </label>
        </li>

        <li data-terminal-id="102" class="">
            <label>
                <input type="radio" name="terminal" class="all" data-terminal-id="102">
                <a...></a>

              ...
            </label>
        </li>
    </ul>

I wrote the following listener:

$(document).on('click', '#all-terminals li label', function(){alert(123)});

when I click on label, I see that alert executes twise.

Why?

I'm running all of your jsfiddles and I'm getting the alert twice...? — KidBilly, Jun 15 '15 at 20:03
Try preventing event bubbling by adding this after the alert: http://stackoverflow.com/a/13900163/1913729 — blex, Jun 15 '15 at 20:06

score 3 · Answer 1 · answered Jun 15 '15 at 20:18

3

Clicking a label automatically creates a click event on an input within it.

Assuming all your labels have inputs, you can simply change to:

$(document).on('click', '#all-terminals li input', function(event) {
  alert(123);
});

Fiddle

answered Jun 15 '15 at 20:18

Rick Hitchcock

35,202
5
48
79

1

This is the correct answer. The currently marked answer is a work around. – But I'm Not A Wrapper Class Jun 15 '15 at 20:39
@CyberneticTwerkGuruOrc please explain why this workaround works ? – gstackoverflow Jun 15 '15 at 20:57
@gstackoverflow The answer (by CrazyPaste) is changing the event type from `click` to `mouseup`. That's a work around. Rick Hitchcock is fixing the `click` event and also explaining why this is the correct solution. – But I'm Not A Wrapper Class Jun 15 '15 at 21:02

score 2 · Accepted Answer · answered Jun 15 '15 at 20:07

2

Not exactly sure why, but mouseup works.

$(document).on('mouseup', '#all-terminals li label', function(){alert(123)});

answered Jun 15 '15 at 20:07

KidBilly

3,408
1
26
40

score 1 · Answer 3 · answered Jun 15 '15 at 20:01

1

I think bubbling is occurring in your case . Read about on Bubbling and Capturing

answered Jun 15 '15 at 20:01

Ashok Mandal

278
2
13

Is it normal or I should avoid twise fires? – gstackoverflow Jun 15 '15 at 20:06
Avoiding it will be better Use instead `$('#all-terminals li label')` it will work – Ashok Mandal Jun 15 '15 at 20:08

score 0 · Answer 4 · answered Jun 15 '15 at 20:01

0

I'm not completely sure, but I think that when you click on the label, you hit 2 of its child overlapping elements. Because they are part of the label but still separate elements, it fires two click events on label.

On the fiddle, it appears the it's the [a] element overlapping the ...

answered Jun 15 '15 at 20:01

James McDowell

2,668
1
14
27

Should I avoid this behaviour ? – gstackoverflow Jun 15 '15 at 20:06
That's what is causing the problem. Usually it's okay, but it can cause problems in cases like click detection or hovering – James McDowell Jun 15 '15 at 20:10

Why does listener activate twice?

4 Answers4