Question

I have the following script in between the head tags on my page:

$.ajax({
  type: "POST",
  url: "my script that gets what I need",
  context: document.body,
  success: function(data){
    //data is now the value that PHP echoed
       phpsaid = data.split('|');
       var size_ind = phpsaid.length/6;
       var size_per = 6;
       for (var i_one =0; i_one<size_ind; i_one++){
          for(var i_two =0; i_two<1; i_two++){
              if(i_one == 0 ){
                  var i_get = 0
              }
              else{
                  var i_get = i_one * 6;
              }
            $("#big_container").append("<div class ='neato'><div class ='c1'>"+phpsaid[i_get]+"</div><div class ='c2'>"+phpsaid[i_get+1]+"</div><div class ='c3'>"+phpsaid[i_get+2]+"</div><div class ='c4'>"+phpsaid[i_get+3]+"</div><div class ='c5'>"+phpsaid[i_get+4]+"</div></div>")           

          }
       }       
  }
});

Then in the main body I have:

<div id ="big_container">

</div>

The ajax script above is generating the divs to go inside big_container. The client has specified that it be done strictly in that way (meaning generate all divs with ajax on the fly), so conceptual arguments of different ways to tackle it unfortunately won’t help much here.

Here is my problem:

I also want to apply the following plugin to all elements of big_container. This of course works perfectly when I hard code the div elements into the page, but I cannot get it to work on the ajax generated divs within #big_container.

$(function(){
  $('#big_container').bxSlider({
    mode: 'vertical',
    ticker: true,
    tickerSpeed: 4500,
    displaySlideQty: 5
  });
}); 

How do I get the plugin function to apply to the ajax generated div’s once they have in fact been generated?

Answer 1

Insert your initialization code after $("#big_container").append("...");

It will look like

$("#big_container").append("<div class ='neato'>..and so on..");
           }
   } // the end of the 'for' loops
$("#big_container").bxSlider({
                     mode: 'vertical',
                     ticker: true,
                     tickerSpeed: 4500,
                     displaySlideQty: 5
                   });

If you call ajax again on the page and add a new content to the existing one then it is better to write the call of the bxSlider as

$("#big_container .neato:last").bxSlider({
                     mode: 'vertical',
                     ticker: true,
                     tickerSpeed: 4500,
                     displaySlideQty: 5
                   });

just after .append part