Question

Google搜索结果中的所有链接都是紫色的，而且几个小时后我感到很沮丧，我决定请你们帮我解决这个问题。

在WordPress的主页上，循环生成列表，其中包含博客上的所有帖子标题。为了改善网站加载时间，我决定使用AJAX。您不必一次加载所有内容，而是单击某个帖子的标题以在下方显示其内容。简单地说，当你点击它时，将帖子的id（取自属性标签）发送到ajax.php文件（带有循环的WordPress模板以显示内容......）。当内容被读出时，它会显示在前端。

问题是插件。因为在内容加载（DOM更改）后它们不会被重新触发。显然，我不希望我将我安装的每个插件添加到AJAX回调中的解决方案，因为它不是应该的方式。我希望它自动化。 WordPress旨在简单易用（即使从开发人员的角度来看）。

我已经尝试过live（），livequery（） - 插件，listen（） - 插件..并尝试将我的ajax脚本更改为WordPress方式（使用admin-ajax.php）和每次结果是一样的 - 它不起作用。

通过插件，我的意思是例如：语法荧光笔，社交共享按钮或FancyBox / Lightbox图像......即使我将插件的功能添加到ajax循环以手动显示它仍然会失败...

我怀疑我可能会使用live（）函数有点不对劲......不管怎样，这是我的代码：

前端循环（index.php）

<?php while (have_posts()) : the_post(); ?>   
    <article>
        <div class="fake">
            <div class="header" rel="<?php the_ID(); ?>">
                <h1 class="title"><?php the_title(); ?></h1>
                <span class="tags">
                    <?php
                      $posttags = get_the_tags();
                      if ($posttags) {
                        foreach($posttags as $tag) {
                          echo $tag->name . ', '; 
                        }
                      }
                    ?>
                </span>
                <span class="post_no">#<?=$published?></span>
                <div class="arrow"></div>
            </div>
        </div>
        <div class="content"></div>
    </article>
   <?php endwhile; ?>

我使用的AJAX片段：

$('.header').live('click',function() {
        var content = $(this).parent().parent().find('.content');
        var post_id = $(this).attr("rel"); 
        content.load("http://localhost/simpleecode/ajax/",{id:post_id}).delay(800).slideDown('slow');});

带有AJAX循环的模板：

<?php $post = get_post($_POST['id']); ?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<?php the_content(); ?>
<?php endif;?>

我认为您可能希望链接到开发网站以查看您自己的DOM和文件（我使用短链接，因为它是开发网站，我不希望它公开无论如何）：

http://bit.ly/Oa6hWH

希望你能知道如何做到这一点：S

Answer 1

使用AJAX请求的success / complete回调来调用DOM新增的html插件。

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin();

}).delay(800).slideDown('slow');

<强> jQuery API - load() method docs

如果插件中有任何尺寸敏感的代码，您可能需要更改它以在动画的回调中调用插件

编辑：不是使用delay（）来设置动画，而是在相同的成功回调中调用动画，html将准备就绪

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin().slideDown('slow');      

});

Edit2替代方法：jQuery延迟对象方法。

您也可以使用deferred来设置ajax回调。

var jqXhr= content.load("http://localhost/simpleecode/ajax/",{id:post_id});
$.when( jqXhr).then( /* plugin function */);

或自定义活动

/* on page load*/
$('#myTable').on('myCustomEventName', function(){
     $(this).doPlugins();
}).trigger('myCustomEventName');

/* ajax callback*/
content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     $('#myTable').trigger('myCustomEventName')

})

如何在ajax在WordPress中加载页面后触发jquery插件？

1 个答案: