Question

我有一个wordpress博客，我发布了一个flexslider（插件的名称是meta滑块）。

现在我在该博客上有一个页面，可以通过帖子动态加载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的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)

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

        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上设置原型，因此是“Undefined”（？）。可能是狂野的猜测。

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

我是JS和AJAX的新手，所以任何有助于解除大脑迷雾的人都会受到赞赏。：）

Answer 1

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

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

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

     $("");

返回一个jQuery对象。您可以使用更多功能扩展jQuery，因为Flex滑块应该可以执行，但如果您不加载它，那么它将无法使用

Answer 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上显示一个帖子，但它并没有让我感觉良好，因为这打破了我主题的很多功能，这是一个制作网站：/关于这个的任何想法？

AJAX get / load后的JS错误

2 个答案: