Mouseenter firing multiple times

Mouseenter firing multiple times

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:

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

The JSON data looks like this:

  1. {
  2.     "url": [
  3.         "http:\/\/image1.jpg",
  4.         "http:\/\/image2.jpg",
  5.         "http:\/\/image3.jpg",
  6.         "http:\/\/image4.jpg"
  7.     ]
  8. }

HTML:

  1.             <div id="imagehover">Images
  2.                 <div id="imagetestresult" class="random-image"></div>
  3.             </div>