问题
I have a button that calls a javascript function using an event handler. For some reason, the event handler is being called twice.
Here is my button (I am using a php object to generate the code, that's why there are a lot of empty tags):
<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>
Here is my event handler:
$('.addToCartButton').click(function() {
alert("bob");
//addToCart($(this).attr("id"));
});
Here, I am getting the alert twice.
I have tried calling the function addToCart in the button's onclick property, but if I try it that way, I get this error:
TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')
I have also tried event.preventDefault() and event.stopPropagation(), and neither worked.
Any ideas why this is happening, or what I can do to stop it from executing twice, or maybe why I am getting an error if I call the javascript function from onclick=""?
回答1:
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, ...)
回答2:
My event was firing twice because I accidentally included both my_scripts.js AND my_scripts.min.js. Ensure you only include one.
回答3:
Unbind event from selector and after appending in element in DOM again trigger event on specific selector.. $("selector_name").unbind( "event" ); //After this call event on selector again..
For example:
$( "#button" ).unbind( "click" );
$("#button").click(function(event) {
console.log("button click again);
});
回答4:
Just for the record in case someone else's having the same problem, I had the same issue, the root cause was that there were 3 buttons with the same ID, after clicking one, the other two also fired their OnClick events...
回答5:
For me, I found out my events were not bound to my mapped component. The relevant answer is at Why is my onClick being called on render? - React.js but to provide some insights I've copied some of the answer below (Hope this helps!):
1. using .bind
activatePlaylist.bind(this, playlist.playlist_id)
2. using arrow function
onClick={ () => this.activatePlaylist(playlist.playlist_id) }
3. or return function from activatePlaylist
activatePlaylist(playlistId) {
return function () {
// you code
}
}
回答6:
You probably want to pass in the event and add
$('.addToCartButton').click(function(e) {
e.preventDefault(); //Added this
alert("bob");
//addToCart($(this).attr("id"));
});
OR
$('.addToCartButton').click(function(e) {
e.preventDefault(); //Added this
alert("bob");
//addToCart($(this).attr("id"));
return false;
});
来源:https://stackoverflow.com/questions/20054889/button-onclick-function-firing-twice