mouseenter event called twice even after stopPropagation

Question

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

Answer 1

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:

1. mouseenter (div becomes thinner)
2. mouseleave (div becomes thicker which will cause an almost automatic mouseenter)
3. 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.
4. Next time I mouseover the div, mouseenter will fire again <== this is twice in a row

You 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.