title: Problem with Jquery, .getJSON in IE7-8
body: <p>I have a jquery script that creates image rollovers for counties in a state.  The script queries an XML document for county x/y coordinates and information, then displays this information when the county on the state image is hovered over. Additionally, a random county and county information is displayed until one of the counties is hovered on; Once the viewer hovers off of the county, the random display resumes.</p>
  
  <p>The script works great in FireFox and Chrome, but not in Internet Explorer 7 - 8.   In IE, the random display works, but about 75% of the counties will not respond to the hover functionality, with apparently no pattern as to why they won't respond (as I said, they work great in other browsers).</p>
  
  <pre><code>    //____________________________________________________________________________________________________________ CONSTANTS
      var DATA_SOURCE       = '/CountyData.js';        // URL of the page that serves JSON county data
  
      var IMAGE_PATH        = '/images/counties/';     // Relative path to the county image folder
  
      var CSS_WRAPPER_CLASS = 'countyWrapper';        // CSS class to apply to each county's wrapper &lt;div&gt;
      var CSS_IMAGE_CLASS   = 'countyImage';          // CSS class to apply to &lt;img&gt; tags
      var CSS_INFO_CLASS    = 'countyInfo';           // CSS class to apply to info &lt;div&gt; tags
  
      var ROTATION_INTERVAL = 10;                     // seconds to show each random county while rotating
  
  
      //____________________________________________________________________________________________________ PRIVATE VARIABLES
      var _isHovering         = false;
      var _autoSelectedCounty = null;
  
  
      //______________________________________________________________________________________________________ FUN BEGINS HERE
      function highlightRandomCounty() {
          // only show a new county if we're not hovering over another one
          if (!_isHovering) {
              var children    = $('#map-holder').children('div');
              var randomIndex = parseInt(Math.random() * children.length);
  
              _autoSelectedCounty = $(children[randomIndex]).children('img')[0];
  
              hideAllCounties();
              showCounty(_autoSelectedCounty);
          }
      }
  
      function showCounty(countyImage) {
          $(countyImage).stop().animate({ opacity: 1.0 }, 500);
          $(countyImage).siblings().animate({ opacity: 1.0 }, 500);
      }
  
      function hideCounty(countyImage) {
          $(countyImage).stop().animate({ opacity: 0.0 }, 0);
          $(countyImage).siblings().animate({ opacity: 0.0 }, 0);
      }
  
      function hideAllCounties() {
          var counties = $('#map-holder').children('div');
  
          for (var i = 0; i &lt; counties.length; i++) {
              hideCounty($(counties[i]).children('img')[0]);
          }
      }
  
      $(document).ready(function() {
          // show the pre-loader
          var preloader = document.createElement('div');
          $('#map-holder').append(preloader);
          $(preloader).attr('id', 'preloader');
  
          //testing var
          var countyCount = 1;
          $.getJSON(DATA_SOURCE, function(data) {
  
              $.each(data.countyData, function(i, item) {
                  // create the container &lt;div&gt; and append it to the page
                  var container = document.createElement('div');
                  $('#map-holder').append(container);
  
                  // configure the container
                  $(container).attr('id', 'div' + item.data_county);
                  $(container).attr('class', CSS_WRAPPER_CLASS);
                  $(container).attr('style', 'left:'+ item.data_x + 'px; top:' + item.data_y + 'px;');
  
  
                  // create the &lt;img&gt; and append it to the container
                  var countyImage = document.createElement('img');
                  $(container).append(countyImage); 
  
                  // configure the image
                  $(countyImage).attr('id', item.data_county + 'Image');
                  $(countyImage).attr('class', CSS_IMAGE_CLASS);
                  $(countyImage).attr('src', IMAGE_PATH + item.data_county_image + '.png');
                  $(countyImage).load(function() {
                      // wait for the image loads before setting these properties
                      $(this).attr('width', countyImage.width);
                      $(this).attr('height', countyImage.height);
                  });
  
                  $(countyImage).hover(function() {
  
                      _isHovering = true;
                      hideCounty(_autoSelectedCounty);
                      showCounty($(this));
                  },
  
                  function() {
                      _isHovering = false;
                      hideCounty($(this));
                  });
  
                  $(countyImage).click(function() {
                      window.location.href =  item.factsLink;
                  });
  
                  // create the info &lt;div&gt; and append it to the container
                  var countyInfo = document.createElement('div');
                  $(container).append(countyInfo);
                  $(countyInfo).attr('id', item.data_county + 'Info');
                  $(countyInfo).attr('class', CSS_INFO_CLASS);
  
                  // Handle county naming exceptions
                  var countyName = item.data_county.toUpperCase();
                  if (countyName == 'SAINTJOYVILLE') {
                      countyName = 'ST. JOYVILLE';
                  } else {
                      if (countyName.indexOf("SAINT") &gt; -1) {
                          countyName = "ST. " + countyName.substr(5);
                      }
                      countyName += " COUNTY";
                  }
                  if (item.story_link == 'no') {
                      $(countyInfo).html('&lt;strong&gt;' + countyName + '&lt;/strong&gt;&lt;br /&gt;' + item.data_total_students + ' Students&lt;br /&gt;' + item.data_total_alumni + ' Alumni&lt;br /&gt;' + '$' + item.economicImpact + ' Impact&lt;br /&gt;Click For More...');
                  } else { 
                      $(countyInfo).html('&lt;strong&gt;' + countyName + '&lt;/strong&gt;&lt;br /&gt;' + item.data_total_students + ' Students&lt;br /&gt;' + item.data_total_alumni + ' Alumni&lt;br /&gt;' + '$' + item.economicImpact + 'Impact&lt;br /&gt;&lt;strong&gt;Latest story:&lt;/strong&gt;&lt;br /&gt;&lt;img src="' + item.story_link + '" alt="story" height="75" width="110"&gt;&lt;br /&gt;' + item.story_title + '&lt;br /&gt;Click For More...');
  
                  }
               });
          });
  
          // hide the pre-loader
          $('#preloader').animate({ opacity: 0.0 }, 1000);
  
           //randomly rotate through the counties
          setInterval(highlightRandomCounty, ROTATION_INTERVAL * 1000);
      });
  </code></pre>
  
  <p>Is there something that I need to enable/disable in order for this to function correctly in IE?  Perhaps some sort of .getJSON/caching issue in IE?  Any information is greatly appreciated.</p>