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
event
s, you're attaching the event
s inside event
s, 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 event
s, 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
Angular - How to Get Result of a Json Object
Allow Only One Checked Checkbox, Angular Best Practice.
Mongodb Get Data to Display in HTML
Validate Phone Number With Yup
How to Combine First Name and Last Name in JavaScript
How to Post Selected Values Using Ajax
Javascript Validation: Block Special Characters
How to Close Bootstrap 3 Dropdown When We Click Outside on a Tablet
Discord Bot Not Getting All Users
How to Remove the X-Axis from a Bar Chart Produced by Google'S Visualization API
React-Native React-Navigation Undefined Is Not an Object (Evaluating 'S.Value.Startswith')
Scrollable Table With Fixed Headers and Fixed First Column
Jquery Click Events Firing Multiple Times
How to Get Width of (Dom) Element in Angular2
How to Get 30 Days Prior to Current Date