2

谷歌搜索结果中的所有链接都是紫色的，几个小时以来我很沮丧，我决定请你们帮助我解决这个问题。

在我的 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

4

1 回答 1

3

使用 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() 方法文档

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

编辑：与其使用 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')

})
于 2012-06-23T16:57:37.237 回答