AJAX获取/加载后JS错误 [英] JS error after AJAX get/load

问题描述

我有一个字preSS博客，我都交了flexslider（插件的名称是元滑块）。

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

现在我在该博客动态加载div的内容与AJAX从帖子的网页。 code是如下：

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;
});

这基本上能正常工作，但滑块JS之后失败，出现以下错误：

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

（从镀铬VM错误）

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();

这样的问题对我来说是：我怎么能解决这个问题？我可以重新初始化了JS不知何故？

要我来说，它看起来像.flexslider函数调用失败，因为原型未设置上（新）的HTML的div id为$（'＃metaslider_531），因此是不确定（？）。胡乱猜测，也许吧。

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.

什么我检查出是可能加载的jQuery的版本，但看起来只有v1.11.0加载一次，所以我应该是无冲突​​。的

我很新的JS和AJAX，所以任何帮助提升在我的脑子雾将AP preciated。 ：）

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

推荐答案

我能够做修理我的问题如下：

I was able to "fix" my problem by doing the following:

首先，我改变了我的AJAX调用这个code加载分区内整个页面：

First, i changed my ajax call to load the whole page inside the div by this code:

$("#refpage-single-post-container").load(post_link, function() {
} );

我知道这是要让JS的工作，因为我昨天看到它的工作 - 但它加载的过程中不必要的废话重块。

I knew this was gonna make the JS work since i saw it work yesterday - but it loaded heavy chunks of unneeded crap of course.

其次，我想通了，这部分从页面的页眉和页脚似乎是必要的JS工作，事实证明我完全忘了在页脚昨天晚上。

Secondly, i figured out which parts from the page's header and footer seemed to be necessary for the JS to work and it turned out i completely forgot about the footer yesterday night.

然后我编辑的single.php只输出光秃秃的帖子内容，包括以下脚本和CSS来自页眉和页脚。这些都是需要加载新的岗位，使JS工作：

I then edited single.php to output only the bare post content, including the following scripts and css from both header and footer. Those were required to load with new post to make the JS work:

<?php $siteurl = get_site_url(); ?>

<script type="text/javascript" src="<?php echo $siteurl; ?>/wp-includes/js/jquery/jquery.js?ver=1.11.0"></script>

    <?php $post = get_post($_POST['id']);?>
    <div id="single-post post-<?php the_ID();?>">
    <?php while (have_posts()) : the_post();
                the_content();
    endwhile;?>  
    </div>

<link rel="stylesheet" id="metaslider-flex-slider-css" href="<?php echo $siteurl ?>/wp-content/plugins/ml-slider/assets/sliders/flexslider/flexslider.css?ver=2.9.1" type="text/css" media="all">
<script type="text/javascript" src="<?php echo $siteurl ?>/wp-content/plugins/ml-slider/assets/sliders/flexslider/jquery.flexslider-min.js?ver=2.9.1"></script>

所以最后，我能够加载后到该分区，并有工作。 而且我现在有一个事实住我的single.php输出没有完整的网页，所有的了，因此是相当不可用。 （设置CSS显示：无以某种方式wouldnt工作的页眉，页脚等，因为重复的ID在标记也许） 我想我可能不会需要在URL以往任何时候都显示一个职位，但它没有让我感觉很好，因为这打破了我的主题功能的很大一部分，这是一家生产网站：/任何想法在这

So finally, i am able to load the post into that div and have it working. But also i now have to live with the fact that my single.php outputs no full page at all anymore, and is thus quite unusable. (Setting the css display:none somehow wouldnt work on the header, footer, etc since of duplicate id's in the markup perhaps) I think i may not need to display a single post ever on a URL, but it doesnt make me feel good since this breaks a good part of functionality on my theme and this is a production website :/ Any ideas on this?

这篇关于AJAX获取/加载后JS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！