Doesn't wanna run plugin on dynamically added content

Doesn't wanna run plugin on dynamically added content

Hi,

I'm trying to use the SlidesJS plugin on a mobile app I'm working on. When I statically have the images in the page, it loads fine. However, I need to have the images loaded dynamically (along with the other data, related to the listing). At the moment I have the following HTML:


  1.     <div id="slides-wrapper"> </div>  

Then the following JS, which grabs the JSON and adds in the related HTML:

  1.     $.getJSON("http://www.site.com/cgi-bin/links/ajax_mobi.cgi",{
  2.         action: 'load_link_detailed', t: temp_set,
  3.         ID: $(this).attr('rel')
  4.     }, function(data) {
  5.         console.log(data)
  6.         //$("#detailed_page_holder").html();
  7.         $("#detailed_page_holder #page_title").html(data.Title);
  8.         // now for each image, lets add them to the slides div
  9.         var back = "";
  10.         if (data.Image1_url) {
  11.             back += '<div class="gallery-div"><img src="' + data.Image1_url +'" /></div>';
  12.         }
  13.         if (data.Image2_url) {
  14.             back +=  '<div class="gallery-div"><img src="' + data.Image2_url +'" /></div>';
  15.         }
  16.         if (data.Image3_url) {
  17.             back += '<div class="gallery-div"><img src="' + data.Image3_url +'" /></div>';
  18.         }
  19.         $('#slides-wrapper').html('<div class="slides">' + back + '</div>'); // empty the div, and add wrapper
  20.         // init slider for images...
  21.           $('#slides').slidesjs({
  22.             play: {
  23.                   active: true,
  24.                   effect: "slide",
  25.                   interval: 5000,
  26.                   auto: true,
  27.                   swap: true,
  28.                   pauseOnHover: false,
  29.                   restartDelay: 2500
  30.                 }       
  31.           });
  32.     });       


The HTML seems to get added ok (looking in the "Elements" section of Firebug);

  1. <div id="slides-wrapper"><div class="slides"><div class="gallery-div"><img src="http://chambresorgslides.ereserveltd.netdna-cdn.com/links/images/6/medium-259886-dsc00480.jpg"></div><div class="gallery-div"><img src="http://chambresorgslides.ereserveltd.netdna-cdn.com/links/images/0/medium-259890-dsc00487.jpg"></div><div class="gallery-div"><img src="http://chambresorgslides.ereserveltd.netdna-cdn.com/links/images/8/medium-259898-dsc00494.jpg"></div></div></div>

..but when the $('#slides').slidesjs() function gets called, nothing is executed.

Do I need to do anything fancy cos the content is loaded AFTER the initial page load?

TIA

Andy