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

Posted 2023-05-09

【中文标题】ajax在WordPress中加载页面后如何触发jquery插件？

【英文标题】：How to trigger jquery plugins after ajax has loaded a page in WordPress?

【发布时间】：2012-06-25 15:24:14

【问题描述】：

在 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

【问题讨论】：

呃，它现在是公开的，无论如何：D

它仍然对蜘蛛机器人隐藏，我的意思是实际的 URL...没关系 :) 在这里并不重要 :)

使用 live 只会帮助添加到链接到单击事件处理程序的页面的新标题...它与插件如何附加到您的页面元素无关...取决于如何插件首先附加到您的页面元素...如果任何插件没有使用 live 或 on，您别无选择，只能在 ajax 加载时再次将新页面元素附加到插件

【参考方案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')

)

【讨论】：

我写过我不想在 Ajax 中使用回调。我希望它是自动化的，但如果这是唯一的解决方案……我怎么知道插件使用什么功能来触发自己？

如果您希望获得像 live() 这样的圣杯，那么没有。大多数插件操作 html，或绑定自定义事件或数据，或有 html 必须存在的其他原因。您可以将插件调用包装在可用于页面加载和 ajax 加载的函数中。取决于正在使用的页面和插件

好吧，你们的意思是，我能做的就是为每个插件找到触发 jquery 函数并将其插入到 load() 函数的回调中？

我添加了更多设置方法，但无论如何，实际插件调用几乎总是必须在新的 html 加载后进行

这样想……语法高亮怎么能高亮不存在的代码？