Menu
I'm new to jQuery and am facing now a weird problem. I succeeded to narrow it down to the fact that a mouseenter event is called twice: once for the containing div (this was my intention) and again for elements within this div (not good). I tried to use return false and stopPropagation but it doesn't seem to work.
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- JS files (order matters!) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript">
$(function (){
$(".testDiv").hover(
function(e) /* IN */ {
$(this).data("htmlBackup", $(this).html());
$(this).html("TEST 123");
e.stopPropagation();
return false;
}, function(e) /* OUT */ {
$(this).html($(this).data("htmlBackup"));
e.stopPropagation();
return false;
});
});
</script>
<!-- this one works -->
<div class="testDiv" style="border: solid">ORIG HTML</div>
<br /> <br /> <br />
<!-- this doesn't work -->
<div class="testDiv" style="border: solid"> <p style="border: solid">ORIG HTML</p></div>
</body>
</html>
You can also see it here: http://jsfiddle.net/rFqyP/3/
Any help will be very much appreciated!
955
asked Oct 29 '25 02:10
What's happening is that the mouseenter event is firing twice in a row (you can test this easily with some console.log calls). This is problematic since is will change the html of the element (and make it just the "test" string), and then on the second consecutive run it will take the html and save it to the element's data. But since there was no mouseleave event fired, as mentioned, the html is the "test" string, so now it saves that to the element data.
After that, the mouseenter and mouseleave events continue to fire just fine, but both the element's html and its data have the same "test" string, so it doesn't change.
The reason the mouseenter fires twice consecutively is because of the borders. The div's dimensions change and so the following series of events takes place:
mouseenter (div becomes thinner)mouseleave (div becomes thicker which will cause an almost automatic mouseenter)mouseenter as mentioned in 2 because even though the mouse left the div, the div expanded, and so the mouse entered. But since mouseenter fired, the div went to the "test" string, and became thinner, so now the mouse is beyond the boundaries of the div, but without firing a mouseleave.mouseenter will fire again <== this is twice in a rowYou can see this happening, if for example you enter with your mouse slowly some of the above events don't happen and it will actually work as expected.
As an aside, I don't think it's the best idea to be swapping html contents. If you want to toggle things, I suggest hide() and show(). Firstly, that saves event handlers, and it makes more intuitive sense. You're interested in hiding things, not serialising and saving.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
