Take the 2-minute tour ×

I have a document with say five buttons. Underneath this row of buttons I generate a placeholder div. When I click on a button I use load() to load into the placeholder a div from another page (each button loads a chunk of HTML into the placeholder div).

Ok, my problem is that the chunks I am loading into the placeholder are slideshows (anythingslider). And they don't work even if I have another slideshow on the main page with all the relevant CSS and JS already loaded.

As far as I've found out I need to use getScript() but I still don't seem to grasp it. Do I need to reload the relevant scripts again?

Thank you in advance for any help - K

share|improve this question
I'm confused what exactly the problem is. Can you elaborate on what exactly isn't working? Is javascript not loading? Are you getting js errors? Is the html not loading when you call load? –  Max Apr 13 '11 at 20:33
is this what youre looking for? w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax1 –  Trevor Arjeski Apr 13 '11 at 20:39
I have apage with a perfectly working set of slideshows. further down the page I would like to load in another slideshow via load(); However even though the slideshow I wish to load into the master page is exactly the same as the slideshows that are already on the page the loaded one just won't work i.e it looks the same as if I have javascript disabled in my browser. –  Kevin Apr 13 '11 at 20:43
@Trevor - not really. I am able to load content fine, it's just if the loaded content requires js to function then I have a problem. –  Kevin Apr 13 '11 at 20:44
@Kevin why don't you just keep the scripts on the page that the html is being loaded to then? –  Trevor Arjeski Apr 13 '11 at 20:45

4 Answers 4

I do experience the same problem with loaded content via .load() for all my scripts I use on the loaded content.

Tried to put the script.js on the top, bottom and even on ever loaded content with no solution yet.

How can I fix it in general?


Just found the answer:

    // fire when any Ajax requests complete

LINK: Running JQuery scripts on AJAX loaded content

share|improve this answer

This has worked for me in getting "jquery-dependent content" loaded into a web page document. I personally like to keep things in functions because its easier to maintain when you have other scripts around it. I created a function called globalSections, which can be used on any page as long I keep the following pattern. Within the function I created a div element with an ID called "header". I then loaded my external "jquery-dependent content" into that newly created div. Finally, get the scripts that are needed to make that content run.

$.globalSections = function() {
  $('#wrapper').prepend('<div id="header"></div>');
  $('#header').load('/myfile.html', function() {

Then run the function

$(function() {

Short and simple

share|improve this answer

It sounds like you just need to initialize the slider from the callback function (called after the content is loaded). The code would look something like this:

$('div#placeholder1').load('content.html', function() {
  // target the loaded div, find the slider and initialize it
  $('div#placeholder1').find('ul.slider').anythingSlider({ /* options */ });
share|improve this answer

It sounds like you are loading the html into your page, but are not instantiating the slider after you do. Loading the html from another page, will not bring over the JS objects running on another page.

share|improve this answer
Nor will any scripts or functions contained within necessarily execute. Nor would you want them to! –  Adam Terlson Apr 13 '11 at 20:39
So I need to instanciate even though the appropriate js + css files are already present in the page containing the 'loaded' content? –  Kevin Apr 13 '11 at 20:39

Your Answer


