Question

I am attemtping to solve an issue I am having and decided to try the event handler for the .load() jQuery function. I am unsure what I did wrong. The example on the jQuery page is:

$('#book').load(function() {
 // Handler for .load() called.
});

my script was:

var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
  if(!$j.cookie('gallerycookie')){
    $j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
    $j.cookie("gallerycookie", 1, {expires: 30, path: '/'});
  }
}); 

Why did my script not work?

Here is the HTML related to that script:

<div style="display:none">
  <div id="gallery-nav-instruct">
    <h2>Gallery Navigation Instructions - Step 1</h2>
    <h2 style="text-align:right">
      <a style="text-align:right;" class="inline cw" href="#gallery-enlarge-instruct">Step 2</a>
    </h2>
    <p>&nbsp;</p>
    <p class="white">
      <img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" />
    </p>
  </div>
</div>

Answer 1

Do you have a way of confirming that the div isn’t already loaded by the time the event is bound? In other words, it could be a timing issue. The load completes, the event is bound, but the event is never fired because the load is already complete.

I would be interested in knowing the problem you’re trying to solve; rather than trouble-shooting the .load() itself (although that might end up being the tool after all!) it’s best to allow room for lateral thinking. For example, I don’t see why you couldn’t do your cookie check and colorbox initialization on document ready. It may be that the image isn’t loaded yet, but I don’t think that would break user experience.