Search jQuery

jQuery Forum

Mouseenter firing multiple times

in Getting Started • 3 years ago

I'm trying to get a random image to appear on each new hover of a div. The images are coming from some JSON data. It's currently working, but the mouseenter function is firing when the mouse is still inside the div. Maybe the getJSON request is working each time the image is delivered? Is it possible to store the JSON data in an array, and access that array each time mouse enters? Any advice would be much appreciated :)

My jQuery code looks like this:

$('#imagehover').on('mouseenter', function() {
$.getJSON('images.json', function(result) {
var index = Math.floor(result.url.length * Math.random());
$("#imagetestresult").html($('<img>', {
src : result.url[index]
}));
});
});

The JSON data looks like this:

{
"url": [
"http:\/\/image1.jpg",
"http:\/\/image2.jpg",
"http:\/\/image3.jpg",
"http:\/\/image4.jpg"
]
}

HTML:

<div id="imagehover">Images
<div id="imagetestresult" class="random-image"></div>
</div>

Replies(1)

watusiware

Re: Mouseenter firing multiple times

3 years ago

We have to guess that your HTML is correct, since you didn't post it.

Break it down into separate concerns. Forget about loading JSON until your mouseenter works correctly. Use console.log() to debug.

BTW, I notice that you get the JSON every time you get mouseenter. That's silly, unless the server might return a different list.

Of course, you can store the retrieved data. Just store the parsed data (not the original JSON) in a variable. Only fetch from the server if the variable is undefined.

Top Reply

Response title

Attachments

jQuery Forum

Mouseenter firing multiple times

Replies(1)

Re: Mouseenter firing multiple times

Statistics

Tags

Actions

Related Posts