Twice the clicking actions triggered by the event

Question

Twice the clicking actions triggered by the event

Whenever I try to trigger a function by clicking on the label text, the click event seems to be firing twice.
HTML

<label class="label_one">
    Label One
    <input type="checkbox"/>
</label>

However, if I modify the HTML code as follows, the issue doesn't occur.

<label for="test" class="label_two">
    Label Two
    <input type="checkbox"/>
</label>

This is my current script:

$('.label_one').click(function(){
    console.log('testing');
});

Could someone please explain why this behavior is happening?
Feel free to check out my jsfiddle here.

javascript jquery html css

Answer 1

Answer №1

The reason for this behavior is related to the concept of event bubbling.

Typically, all elements propagate the event up to the root of the document. However, the label tag differs in that it bubbles the event only to its child nodes, which explains why clicking on the label affects the input tag.

In your scenario, you assigned the event handler to the label tag. As a result:

The event triggers when the label tag is clicked.
The event then bubbles within the checkbox, causing it to become selected. The checkbox then bubbles the event back up to its parent node, the label tag, resulting in a second trigger.

To resolve this issue, simply attach the event handler directly to the input/checkbox tag, and the functionality should work correctly.

Answer 2

The reason for this behavior is related to the concept of event bubbling.

Typically, all elements propagate the event up to the root of the document. However, the label tag differs in that it bubbles the event only to its child nodes, which explains why clicking on the label affects the input tag.

In your scenario, you assigned the event handler to the label tag. As a result:

The event triggers when the label tag is clicked.
The event then bubbles within the checkbox, causing it to become selected. The checkbox then bubbles the event back up to its parent node, the label tag, resulting in a second trigger.

To resolve this issue, simply attach the event handler directly to the input/checkbox tag, and the functionality should work correctly.

Answer 3

Answer №2

When I tested this issue in the version of Chrome that I am currently using, I was unable to replicate it.

However, if you are experiencing this problem in a different browser, it may be due to the following reason -

As per the specifications, labels that contain inputs and are linked to an input through the for attribute will activate a click event on the associated input when they are clicked.

Therefore, in the first scenario, there are 2 click events:

An actual click on the <label>
A click triggered on the <input> by the label

The click triggered on the <input> will propagate up to the <label> and execute your handler.

In the second case, since a for attribute is defined and there is no corresponding input with an id of 'test', the additional click will not occur even if the input is enclosed within the label.

Answer 4

When I tested this issue in the version of Chrome that I am currently using, I was unable to replicate it.

However, if you are experiencing this problem in a different browser, it may be due to the following reason -

As per the specifications, labels that contain inputs and are linked to an input through the for attribute will activate a click event on the associated input when they are clicked.

Therefore, in the first scenario, there are 2 click events:

An actual click on the <label>
A click triggered on the <input> by the label

The click triggered on the <input> will propagate up to the <label> and execute your handler.

In the second case, since a for attribute is defined and there is no corresponding input with an id of 'test', the additional click will not occur even if the input is enclosed within the label.

Answer 5

Answer №3

To enable selection, click on the checkbox first before clicking on the label. Utilize the .change event handler on the input element.

$('.label_one input').change(function(){
    var html = '<div class="log_sec_one">Log</div>';
    $('.logs').append(html);
});

$('.label_two input').change(function(){
    var html = '<div class="log_sec_two">Log</div>';
    $('.logs').append(html);
});

View DEMO

Answer 6

To enable selection, click on the checkbox first before clicking on the label. Utilize the .change event handler on the input element.

$('.label_one input').change(function(){
    var html = '<div class="log_sec_one">Log</div>';
    $('.logs').append(html);
});

$('.label_two input').change(function(){
    var html = '<div class="log_sec_two">Log</div>';
    $('.logs').append(html);
});

View DEMO

Answer 7

Answer №4

Ensure to move the input element outside of the label tag and specify the appropriate relationship using the for="" attribute.

<label class="label_one" for="checkbox_one">
    Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
    Label Two
</label>
<input type="checkbox" id="checkbox_two"/>

<div class="logs"></div>

Find the code snippet on JSFiddle: https://jsfiddle.net/hvv6ucu8/2/

Answer 8

Ensure to move the input element outside of the label tag and specify the appropriate relationship using the for="" attribute.

<label class="label_one" for="checkbox_one">
    Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
    Label Two
</label>
<input type="checkbox" id="checkbox_two"/>

<div class="logs"></div>

Find the code snippet on JSFiddle: https://jsfiddle.net/hvv6ucu8/2/

Answer 9

Answer №5

<label for="text" class="label_one">
    Label One
    <input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
    Label Two
    <input type="checkbox" name="1"/>
</label>

Make sure to include the 'for' attribute in the label with the class 'label_one'. Once you do that, everything should work as expected.

Answer 10

<label for="text" class="label_one">
    Label One
    <input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
    Label Two
    <input type="checkbox" name="1"/>
</label>

Make sure to include the 'for' attribute in the label with the class 'label_one'. Once you do that, everything should work as expected.

Twice the clicking actions triggered by the event

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Activating and deactivating event capturing in Vue.js

Two separate ajax functions executed sequentially both yield identical results

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

Trouble arises with the chrome extension code for retrieving tweets from Twitter

Add custom scripts to individual components within a Vue.js application

How about using AngularJS with JavaScript modules?

a guide to incorporating Google Maps into your website using latitude and longitude coordinates

Obtaining the correct information from an array using Ionic's Angular framework

What is the process for transitioning data between SQL, PHP, and JavaScript seamlessly?

Is it possible to use ref in React to reference various elements based on specific actions?

Determine the total cost based on the quantity purchased

Is your YQL JSON script failing to provide the expected output?

Issues with Rails comments not displaying properly when using ajax requests

Implementing callbacks in Chart.js for hover events

A Guide to Implementing Inner CSS in Angular

Successful Ajax call results in the retrieval of CSRF token without any message being returned

execute numerous queries simultaneously

The jQuery AJAX call is successful in Firefox, but unfortunately, it is not working in Internet Explorer

Is there a way to update Checkbox changes within a Datagrid without selecting the entire row?

The deletion of an item from the database was unsuccessful when attempting to do so through an AJAX