why is click handler called twice

Question

I've created a very simple jsFiddle example of a click handler being assigned to two radio buttons with:

    $(document).ready(function () {
        $(".title").on("click", function (event) {
            alert('clicked');
        });
    });

As you can see, each time a radio button is selected the handler is called twice, why?

<label class="title">
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool
</label>
<label class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</label>

It's called once for me on the fiddle. Have you tried on a different machine / browser? — SpaceDog, Sep 13 '13 at 13:40
It seems it is only called once if you click the radio button, twice if you click the label. — James Montagne, Sep 13 '13 at 13:40
If you have a label, then that may fire the radiobutton as well. — Daniel, Sep 13 '13 at 13:40

score 6 · Accepted Answer · edited Dec 18 '15 at 10:59

6

You're using the title class in both labels, which means that it is used on both radio boxes. When you click it, it fires the event on both radio boxes. You should do your work with the radio button selector:

$(document).ready(function () {
    $(":radio").on("change", function (event) {
        alert('clicked');
    });
});

demo

reference change

by click

$(document).ready(function () {
    $(":radio").on("click", function (event) {
        alert('clicked');
    });
});

demo

edited Dec 18 '15 at 10:59

Bono

4,757
6
48
77

answered Sep 13 '13 at 13:42

Rituraj ratan

10,260
8
34
55

he is not asking how to i think , he wants only to know whats wrong – Charaf JRA Sep 13 '13 at 13:46
i mention in my answer – Rituraj ratan Sep 13 '13 at 13:47

score 3 · Answer 2 · answered Sep 13 '13 at 13:43

3

This happens because your <input> tag is inside the <label> tag; since clicking the label triggers a click on the radio as well, you are basically clicking the radio two times.

If you move the <input> tag out of the <label> tag, you should be ok.

answered Sep 13 '13 at 13:43

Raibaz

9,280
10
44
65

2

You actually aren't clicking the radio twice, you're clicking the label twice. – James Montagne Sep 13 '13 at 13:44

Sarcastic · Answer 3 · 2013-09-13T15:35:49.390

1

Use Change Event. It will work fine.

$(document).ready(function () {
    $(".title").on("change", function (event) {
        alert('clicked');
    });
});

edited Sep 13 '13 at 15:35

answered Sep 13 '13 at 13:42

Sarcastic

677
5
14

You say to use the change event and then your code uses click. – James Montagne Sep 13 '13 at 13:44
Thanks for pointing out. Was a typo. – Sarcastic Sep 13 '13 at 15:36

score 1 · Answer 4 · answered Sep 13 '13 at 13:43

1

Try

$(".title input").on("click", function (event) {
  alert('clicked');
});

answered Sep 13 '13 at 13:43

beautifulcoder

10,832
3
19
29

@Scalpweb have you tried it? – Ilia G Sep 13 '13 at 13:45

Charaf JRA · Answer 5 · 2013-09-13T13:58:57.837

The problem is comming from <label> because when you click on label , radio is clicked as well and vise versa. If you change <label> to <p> ,this problem will be solved : DEMO HERE

<p class="title">
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool
</p>

<p class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</p>

Or just try to add click event only to input like this :

$(document).ready(function () {
    $(".title input[type='radio']").on("click", function (e) {
        alert('clicked');
    });
});

Right, bind the click to the radio button, not the label. – James Montagne Sep 13 '13 at 13:43 — James Montagne, Sep 13 '13 at 13:43

score 0 · Answer 6 · answered Sep 13 '13 at 13:45

It's to do with the scope of the title element I thing.

If you add a class to the inputs, and then bind the event to that it'll work correctly.

HTML:

<label class="title">
    <input type="radio" class='checkbox' name="heading" checked="checked" />Introduction and General Information about the Marketing Tool</label>
<label class="title">
    <input type="radio" class='checkbox' name="heading" />Implementation Steps of the Marketing Tool</label>

Script:

    $(document).ready(function (e) {
        $(".checkbox").on("click", function (event) {
            alert('clicked');
        });
    });

Fiddle

Deep Sharma · Answer 7 · 2013-09-13T13:49:28.803

-1

did some modification and it is working fine... though your code is correct here is your example

    $(document).ready(function () {
        $("input[type=radio]").on("click", function (event) {
            alert('clicked');
        });
    });

edited Sep 13 '13 at 13:49

answered Sep 13 '13 at 13:45

Deep Sharma

3,374
3
29
49

1

This isn't really true. The click event was not bound for both the button and the label, just the label. The issue is that clicking the label also fires a click on the radio button. So it fires twice, once for the click on the label, then the click fired on the radio bubbles up to the label and fires again. The radio button itself does not have a handler bound. – James Montagne Sep 13 '13 at 13:47
thanks @JamesMontagne i had two fiddles opened so got confused. anyways i will me more carefull next time. :) – Deep Sharma Sep 13 '13 at 13:50

why is click handler called twice

7 Answers7