Most likely this question has been asked many times before, but as far as I could see, the same responses are given and they do not work for me.
The problem is the following: I have a button control that is rendered as a table and inside this table I have a smaller button. The requirement is that clicking the outer button should show one message and clicking on the small inner button should show another message. I have the code inside this fiddle: http://jsfiddle.net/DZFEZ/3/
$('#mine').click(function (evt) {
alert("big button click");
});
$('#mine-fav').click(function (evt) {
alert("small button click");
var event = evt || window.event; // cross-browser event
if (event) {
event.returnValue = false;
event.cancelBubble = true;
event.stopPropagation();
event.preventDefault();
}
});
This code works ok on Chrome (and I suspect Opera/Safari. did not check as I cannot install those browsers), but on IE9+ and Fireforx it does not. The event is just triggered on the big outer button, no matter if I click on the small one.
Anybody has any clue why? Thanks, Marius.
To resolve your problem just replace outer button to div.
Because i think that the button in atomic at those browser and there are some difference in browsers implementation. You should use elements as expected. Working demo
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments