Apply javascript to html injected with AJAX

Question

I am creating a portfolio site that I'd like pull in partial HTML files through an AJAX request. This is the basic HTML:

    <div id="portfolio">
      // This will be replaced
    </div>
    <a href="#" id="fire">Click Me</a>

The jquery code that I am using looks like this:

    $( "#fire" ).click(function() {
        $( "#portfolio" ).load("partial.html #portfolio > *");
    });

This works, and I'm able to load the individual partial pages, but I cannot figure out how to have scripts run on the inserted HTML. I'm using Foundation Orbit, and I want to have these sliders function properly after the AJAX call. I thought maybe it was a conflict, so I also tried using slides.js, but that didn't work either. I have all the dependencies and needed scripts in my index file. What do I need to do to have the Orbit script apply to content on the page after the AJAX call?

I have a functioning plunkr that shows the problem I'm having. I'm just learning all this, so apologies if there is a super obvious answer, but I haven't found it on the site.

Here is the plunkr. It has a working Orbit slider to prove -- to myself -- that the script is working.

Thanks in advance!

Answer 1

You need to use a callback function, which is an optional argument for load()

$( "#portfolio" ).load("partial.html #portfolio > *", function (response) {
    // executed after query is complete
});

After you add a new Orbit slider to the page, you will have to initialize it:

$(document).foundation('orbit').init();

... so, you'd do that in your callback function.

Documentation

• jQuery.load - http://api.jquery.com/load/
• Foundation Orbit - http://foundation.zurb.com/docs/components/orbit.html