JS error after AJAX get/load

JS error after AJAX get/load

本文关键字：load get AJAX error after JS      更新时间：2023-09-26

我有一个wordpress博客，我有一个flexslider(插件的名字是meta slider)的帖子。

现在我在博客上有一个页面，用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:"<",
                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函数调用失败，因为原型没有设置在(新的)htmldiv上，id为$('#metaslider_531')，因此是"未定义"(?)。也许是瞎猜。

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

我很新的JS和AJAX，所以任何帮助解除迷雾在我的大脑将不胜感激。:)

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

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

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

     $("");

返回一个jQuery对象。你可以像flex slider那样扩展jQuery的更多功能但如果你不加载它它就无法使用

我能够"修复"我的问题做以下:

首先，我改变了我的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显示:none不知何故不会在页眉，页脚等工作，因为在标记中重复的id可能)我想我可能不需要在一个URL上显示一个帖子，但它并没有让我感觉很好，因为这打破了我的主题上的一个很好的功能部分，这是一个生产网站:/对此有什么想法吗?

相关文章：