Jquery Click Events Firing Multiple Times

why is jQuery click event firing multiple times

Because you are binding it multiple times. Click event inside a click event means every time you click, a new click event is being bound on top of the previously bound events. Do not bind click events inside of click events unless the click event creates the element. There's also no need to re-initialize the modal over and over.

$(document).ready(function ($) {

$('#confirmCreateModal').modal({show: false});

$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');

var test = "123";
alert(test);
console.log(test);
});

$('.creategene').click(function () {

$('#confirmCreateModal').modal('show');

});
});

Demo

jQuery on click event firing multiple times

just add off() before on() to remove existing event on it

there's a possibility that you already bind an event in that element so if you want to rebind the event you just off('event') to avoid firing event multiple times

$('#table').off("click").on("click", ".delete", function() {
var data_name = $("#dataSelector option:selected").attr('name');
alert(data_name);
});

Javascript click events firing multiple times?

What's happening is that getInput is being called for each click event, meaning that the loop is running each time, registering the event again. So each time you click the radio button the loop will attach an event to the DOM element again. You should only register the event once: https://jsfiddle.net/2jbLdo9n/

Remove the onclick event on the input:

<div class="right-item">
<input id="male" type="radio" name="gender" value="male">
<label class="left-m" for="male"><span></span> Male </label>
</div>
<div class="right-item">
<input id="female" type="radio" name="gender" value="female">
<label for="female"><span></span> Female </label>
</div>

Then in your JavaScript, just call getData.init();

getData.init();

jQuery Onclick Function is Firing Multiple Times

That happens because you've nested events, you're attaching the events inside events, so every time you click a new event will be attached and that leads to multiple event attachment to the same element.

Try to avoid the nested events & pull out the events, or use the off() to detach the event before attaching the new one using on(), like this:

$("#numberPurchaseStockButton").off('click').on('click', function() {

Instead of this:

$("#numberPurchaseStockButton").click(function() {

Hope this helps.

jQuery click event on button firing multiple times?

If a button is not given a type attribute, it defaults to a submit button. You're binding a(nother) handler for form submission when the button is clicked, which is then immediately triggered by the button click because it's a submit button that is a child of the form. You can get the behaviour I believe you want by removing the outer event binding since clicking the button already submits the form:

$(document).ready(function() {
$('#toolbar-year-form').submit(function(e) {
e.preventDefault();
e.stopPropagation();
alert("submitted");
});
});

document.on click executing multiple times

You have to unbind the event listener and re-bind it like:

$(document).off('click', '[class=click]').on('click', '[class=click]', function () {

it will help.

Note: Do not include the JS inside the popup view, otherwise it will load again and again, instead put it in the parent view and use the above code.

How to prevent function/event from firing multiple times

This could work.

Attach event handler to the active exit button only, document.querySelector could be better choice in this case.

const resetVideo = document.querySelectorAll(".container.active .exit");

attach event with once: true, so event handler is removed once the event is fired.

  function createResetHandler(player) {

const resetVideo = document.querySelectorAll(".container.active .exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", function resetVideoHandler() {
player.destroy();
console.log("removePlayer");
}, {
once: true
});
})
}

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

  • once

A boolean value indicating that the listener should be invoked at most
once after being added. If true, the listener would be automatically
removed when invoked.

Or using removeEventListener

  function createResetHandler(player) {

const resetVideo = document.querySelectorAll(".container.active .exit");
resetVideo.forEach(function resetVideoHandler(video) {
const resetVideoHandler = () => {
video.removeEventListener("click", resetVideoHandler);
player.destroy();
console.log("removePlayer");
};
video.addEventListener("click", resetVideoHandler);
})
}


Related Topics



Leave a reply



Submit