Why Is the Onclick Event Triggered Twice

Why is the onClick event triggered twice?

It is calling twice because button is inside a span and span has onclick="alert('Boem')", hence when you trigger click on button then it shows alert and same click event propagate to span and shows alert once again.

you need to stop default behaviour of button using below code :

$(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

Demo

Javascript click event triggers twice

This happens because of what the HTML spec describes at 4.10.4:

For example, on platforms where clicking a checkbox label checks the
checkbox, clicking the label in the following snippet could trigger
the user agent to run synthetic click activation steps on the input
element, as if the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control,
or do nothing.

This means that when a <label> is clicked, the browser creates a second "synthetic" click event on the associated <input> element, in order to toggle its state.

The reason divClicked is triggered twice, is because the first event which comes from the <label> bubbles up to the <div>, and also the second, synthetic click event bubbles up to the <div>.

Why onclick is being triggered twice?

When you click on the label, it triggers the checkbox`s click event.

But clicking on a label also automatically sends a click event to the associated input element, so this is treated as a click on the checkbox. Then event bubbling causes that click event to be triggered on the containing element, which is the label, so your handler is run again.

put the checkbox outside the label like so

<label></label>
<input type="checkbox">

UPDATE : you can also do as @Rejith R Krishnan suggested and set the click event handler on the checkbox and not the label

Onclick is called twice

event.preventDefault(); instead of event.stopPropagation(); triggers onclick on the clicked element only. A demo at jsFiddle.

button onclick function firing twice

Maybe you are attaching the event twice on the same button. What you could do is unbind any previously set click events like this:

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

This works for all attached events (mouseover, mouseout, click, ...)

Click event triggeres twice but are only set once

The second click event on the form is triggered by clicking on the label element wrapping the input and the other elements. A label element triggers a click event on the associated input element. MDN says:

"When a label is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control."

Preventing the default action of clicking the label is not a solution, since it would prevent the state change of the associated checkbox. A fix would be to attach input event instead of click to execute what you need when the state of the checkbox is changed.

If there are more inputs to listen in the form, things are getting a bit more complex, as usual when using this type of the event delegation. In that case you've to check the event really was triggered from an element you expect to response the clicks.

Click event is getting triggered twice in a table

Update you click event like below:

$(".table_attendance").on('click', 'input', function(e) {

You can try it below:

$(document).ready(function() {    $(".table_attendance").on('click', 'input', function(e) {    var attendance = {      name: $(this).closest("tr").find("td:nth-child(1)").text()    };    console.log(attendance);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table class="col-md-12 text-center">  <tr>    <th class="text-center">Name</th>    <th class="text-center">Attendance</th>
  </tr>  <tr class="" data-id='1'>    <td>Md. Khairul Basar</td>    <td class="form-inline table_attendance">      <div class="form-check form-check-radio">        <label class="form-check-label">                        <input class="form-check-input" type="radio" name="exampleRadio"                               id="exampleRadios1" value="option1">                        <span class="form-check-sign"></span>                        Present                    </label>      </div>      <div class="form-check form-check-radio">        <label class="form-check-label">                        <input class="form-check-input" type="radio" name="exampleRadio"                               id="exampleRadios2" value="option2" checked>                        <span class="form-check-sign"></span>                        Absent                    </label>      </div>    </td>
  </tr></table>

Why the onclick element will trigger twice for label element

When you click on the label, it triggers the click handler, and you get an alert.

If you change your HTML to this, you won't get the double alert:

<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>

The label is now associated with the checkbox using the for attribute instead of wrapping around it.

DEMO

Why is this onClick event handler firing twice in my create-react-app

My best guess is that in the first case, you are also modifying the state directly, when you do joke.score = joke.score + 1;

Because you are doing this mapping directly on state array variable, and in Javascript, when using array, you are only working with pointer to that array, not creating a copy of that array.

So the mapping function probably takes a shallow copy of the array, and there's where problem happens.

You can use lodash to create a deep copy of the state array before you going to work with it, which will not cause your problem:

https://codesandbox.io/s/great-babbage-lorlm

Why Is the Onclick Event Triggered Twice