Pretty Photo wont trigger when using .load?

HI all,

I am trying to load elements from #somediv in "page B" into my main #content div in my index.html file.

I've tried reading through multiple posts on this site and I just can't seem to figure out what I'm doing wrong. I'm new to jquery so that probably explains my ineptitude!

Anyway: Using Pretty Photo links on my main page works fine

I have the relevant links to jQuery.js, prettyphoto.js & css etc... and everything functions well.

On "Page B", the one I'm trying to bring the contents of #somediv over to my index.html #content div - i also have the relevant links and pretty photo works fine on that page by itself as well.

My problem: I'm using this function (called from my index.html page and located in an external file im calling from the head section of my index.html page if that helps) to load the contents of the external (but on the same domain) page.

   $(document).ready(function() {
  $("#EVL_1").click(function(event){
   $('#content').load('INFO_du.html #EVL_1');
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
  });
  $("#EVL_2").click(function(event){
    $('#content').load('INFO_du.html #EVL_2');
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
  });  });

and clicking on the link contained in the "Page B" #somediv that is loaded into my index.html page via .load using this script (see below)

<span class="file"><a href="Dry_Utility/test.html?iframe=true&width=100%&height=100%" rel="prettyPhoto[test]" title="A very old Sample for illustrative purposes!">Test - regular HTML</a></span>

Works fine for loading the external div correctly, and on my desktop using IE, pretty photo pops up when I click on the link,

But when i upload it to my server and try it, the link to test.html above doesn't open in pretty photo - it opens in a new window? (using IE, Chrome and Firefox) so I'm definately missing something:

From reading through all the entries here, I've figured out that I must somehow call the prettyphoto javascript "I think" after the .load function. Thats when i added the following line after the .load section and it worked on my desktop (but nowhere else!)

        $("a[rel^='prettyPhoto']").prettyPhoto(); 

I have been trying different things I have found on this site all day and cant figure out how to make this work and get the prettyphoto.js to load after i do the .load and bring the div over to my main page.

sorry if this is something realy stupid I'm just not getting it?

One last thought: Im using .load to bri开发者_JS百科ng over #somediv, which contains the link above to a third page (also on same domain) test.html (maybe thats my problem?)

I believe you're having trouble because "load" isn't coming back right away. Put your call to prettyPhoto in a success callback, and I think it will work!

More specifically, in your local test environment, it comes back instantly. But on the server, it takes just a little bit longer, so your HTML isn't in the document when you make your call to .prettyPhoto the elements. Make sense?

http://api.jquery.com/load/

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Thanks for the direction Dawson:

It works now - see below (just had to make sure I had the css file in the head of the test.html page and we are good!)

Used this function:

            $(document).ready(function() {   
            $("#EVL_1b").click(function(event){    
                $('#content').load('INFO_du.html #EVL_1b', function() {     
                $("a[rel^='prettyPhoto']").prettyPhoto();    
                });
            });
        });

and this Link (to get rid of the ;return false which sounded like a bad idea as i read through this site)

<a href="#" id="EVL_1b">EVL_1b</a>

Thank you again for your help!!!