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

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 请求的成功/完成回调调用 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')

})