AJAX获取/加载后出现JS错误

Question

i have a wordpress blog where i have post with a flexslider (plugin's name is meta slider).

Now i have a page on that blog that loads a div's content dynamically with AJAX from posts. code is the following:

$(".post-link").click(function(){
    var post_link = $(this).attr("href");

    $("#refpage-single-post-container").html("content loading");

      $.get(post_link, function(result){
        $result = $(result);

        $result.find('div.entry-content').appendTo('#refpage-single-post-container');
        $result.find('script').appendTo('#refpage-single-post-container');

      }, 'html');           

    //e.preventDefault();
    return false;
});

This basically works fine, but the slider JS afterwards is failing with the following error:

(VM error from Chrome)

Uncaught TypeError: undefined is not a function VM4036:3
metaslider_531 VM4036:3
timer_metaslider_531 VM4036:18
(anonymous function) VM4036:20
(anonymous function)

The following is the slider script (begins with an empty line):

        var metaslider_531 = function($) {
-->     $('#metaslider_531').flexslider({ 
                slideshowSpeed:3000,
                animation:"fade",
                controlNav:true,
                directionNav:false,
                pauseOnHover:true,
                direction:"horizontal",
                reverse:false,
                animationSpeed:600,
                prevText:"<",
                nextText:">",
                slideshow:true
            });
        };
        var timer_metaslider_531 = function() {
            var slider = !window.jQuery ? window.setTimeout(timer_metaslider_531, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_531, 1) : metaslider_531(window.jQuery);
        };
        timer_metaslider_531();

So the question to me is: How i can fix this? Can i re-init that JS somehow?

To me it looks like the .flexslider function call fails because the prototype is not set on that (new) html div with the id $('#metaslider_531'), thus being "Undefined"(?). Wild guess, perhaps.

What i checked out is which versions of jQuery might be loaded, but it looks only v1.11.0 is loaded once, so i should be "conflict free".

I am quite new to JS and AJAX, so any help lifting the fog in my brain would be appreciated. :)

Answer 1

You are probably not loading the flexslider plugin, are loading it before jQuery or override $ because you're loading several libraries.

In the development tools do you see any files that are not loaded?

In the development tools what sources are loaded? What is the order in which you load the scripts?

     $("");

Returns a jQuery object. You can extend jQuery with more functionality as flex slider is supposed to do but if you don't load it then it won't be available