jquery loading external html with plugin

Question

I am using jquery's ajax loading function to load an external html. The external html is using jquery and a jquery plugin called flexslider (an image gallery). The documentation says to load the flexslider with:

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        $('.flexslider').flexslider({
            slideshow: true, slideshowSpeed: 7000, animationDuration: 600, pauseOnAction: true, pauseOnHover: false});
    });
</script>

When I call this it does not work. I tried doing this on the parent page but it did not seem to work either. I also made sure to load the external html before I initialized flexslider. Is there another event I should use on the parent page instead of

$(window).load(function(){});

Answer 1

do not use $(window).load(function(){});

use $(document).ready(function(){});

OR

window.onload = mymethod();
function mymethod()
{
   alert('onload occured')
}

​ instead

see the demo

Answer 2

When you loads html page with ajax, then after loading you can bind the flexslider on ajax complete ( like a callback ) instead of doing it in $(window).load() or $(window).ready().

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

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

Answer 3

Have a look at http://wordpress.org/extend/plugins/advanced-ajax-page-loader/faq/.

Basically, the problem boils down to the hook which jquery/javascript uses to attach functions to events. Many of the normal hooks you would expect to use - e.g. jQuery(document).ready(...) - won't trigger after an ajax load.

So you have to take the same code that triggers on page load and make sure it also gets triggered after the ajax load.

Caveat: I haven't actually ever done this myself, so I can't give code examples I'm afraid. I'm just working on something which might need this functionality myself, so thought I'd share what I found in my exploration.