AJAX 获取/加载后的 JS 错误答案

【问题标题】：JS error after AJAX get/loadAJAX 获取/加载后的 JS 错误
【发布时间】：2014-10-01 09:35:39
【问题描述】：

我有一个 wordpress 博客，我在其中发布了一个带有 flexslider 的帖子（插件的名称是元滑块）。

现在我在该博客上有一个页面，该页面使用 AJAX 从帖子中动态加载 div 的内容。代码如下：

$(".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 失败并出现以下错误：

（来自 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)

以下是滑块脚本（以空行开头）：

        var metaslider_531 = function($) {
-->     $('#metaslider_531').flexslider({ 
                slideshowSpeed:3000,
                animation:"fade",
                controlNav:true,
                directionNav:false,
                pauseOnHover:true,
                direction:"horizontal",
                reverse:false,
                animationSpeed:600,
                prevText:"&lt;",
                nextText:"&gt;",
                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 函数调用似乎失败了，因为原型未设置在 ID 为 $('#metaslider_531') 的那个（新）html div 上，因此是“未定义”（？）。也许是胡思乱想。

我检查的是可能会加载哪些版本的 jQuery，但它看起来只加载了一次 v1.11.0，所以我应该“无冲突”。

我对 JS 和 AJAX 还很陌生，所以如果能帮助我解除迷雾，我将不胜感激。 :)

【问题讨论】：

页面上已经加载了jQuery，为什么还要检查它是否准备好？
我不知道，在下面查看我的答案

标签： javascript jquery ajax flexslider typeerror

【解决方案1】：

您可能没有加载 flexslider 插件，而是在 jQuery 之前加载它或覆盖 $，因为您正在加载多个库。

在开发工具中，您是否看到任何未加载的文件？

在开发工具中加载了哪些源？加载脚本的顺序是什么？

     $("");

返回一个 jQuery 对象。您可以扩展 jQuery，使其具有更多功能，就像 flex 滑块应该做的那样，但如果您不加载它，那么它将不可用

【讨论】：

【解决方案2】：

我能够通过执行以下操作“解决”我的问题：

首先，我更改了我的 ajax 调用以通过以下代码在 div 中加载整个页面：

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

我知道这将使 JS 工作，因为我昨天看到它工作 - 但它当然加载了大量不需要的废话。

其次，我发现页面页眉和页脚中的哪些部分似乎是 JS 工作所必需的，结果我昨天晚上完全忘记了页脚。

然后我编辑了 single.php 以仅输出裸帖子内容，包括以下脚本和来自页眉和页脚的 css。那些需要加载新帖子才能使 JS 工作：

<?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>

所以最后，我能够将帖子加载到该 div 中并让它工作。但我现在也不得不忍受这样一个事实，即我的 single.php 不再输出完整的页面，因此完全无法使用。（设置 css 显示：由于标记中可能有重复的 id，因此无法在页眉、页脚等上工作）我想我可能不需要在 URL 上显示单个帖子，但这并没有让我感觉良好，因为这破坏了我主题的大部分功能，而且这是一个生产网站：/ 对此有什么想法吗？

【讨论】：