-1

我有一个 div (i) ，其中包含 Ajax 的内容加载.load()。

加载该 div (i) 后，有两个锚链接可打开上一篇或下一篇文章。

这些下一个和上一个链接可以很好地将整个页面重新加载到它们各自生成的 url，但我需要它们加载到它们首先加载到的 Ajax 帖子中。

单击它们时发生的情况是，已经加载到 Ajax div 中的当前帖子只是重新加载。下一个或上一个帖子href将被忽略。

下一篇/上一篇文章的锚结构：

        <div class="previousNav">
                <?php $prev_post = get_previous_post();
             if (!empty( $prev_post )): ?>
              <a href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="<?php the_ID(); ?>">
                &larr;</a>
             <?php endif; ?>
         </div>

         <div class="nextNav">
            <?php $next_post = get_next_post();
             if (!empty( $next_post )): ?>
              <a href="<?php echo get_permalink( $next_post->ID ); ?>" rel="<?php the_ID(); ?>">
                &rarr;</a>
             <?php endif; ?>
         </div>

上述 html 的 jScript 函数：

jQuery(function($){
    $(document).ready(function() {
        $('.previousNav a').click(function (event) {
            event.preventDefault();
            var post_id = $(this).attr("rel"); 
            $(".aboveTheFold").load("<?php echo get_site_url(); ?>/ajax-post/",{id: post_id}); console.log();
            return false;
        });
        $('.nextNav a').click(function (event) {
            event.preventDefault();
            var post_id = $('.nextNav a').attr("rel");
            $(".aboveTheFold").load("<?php echo get_site_url(); ?>/ajax-post/",{id: post_id});
            return false;
        });
    });
});

没有从 Chrome 控制台中获得任何输出console.log()或任何错误。

这是 Ajax 错误吗？

4

2 回答 2

1

将事件委托与.on()方法一起使用：

$('body').on('click', '.previousNav a', function (event) {
    event.preventDefault();
    var post_id = $(this).attr("rel"); 
    $(".aboveTheFold").load("<?php echo get_site_url(); ?>/ajax-post/",{id: post_id}); 
    return false;
});

$('body').on('click', '.nextNav a', function (event) {
    event.preventDefault();
    var post_id = $('.nextNav a').attr("rel");
    $(".aboveTheFold").load("<?php echo get_site_url(); ?>/ajax-post/",{id: post_id});
    return false;
});

因为您的.previousNav aand.nextNav a会在每次加载 ajax 后刷新，所以不会第二次触发事件处理程序。但是通过事件委托，您可以将事件处理程序附加到当前和未来的元素。

参考：

  • .on()- jQuery API 文档
于 2013-06-04T07:46:30.443 回答
0

jQuery 1.8 及更高版本

 $('.previousNav').on('click', 'a', function (event) {
            event.preventDefault();
            var post_id = $(this).attr("rel"); 
            $(".aboveTheFold").load("<?php echo get_site_url(); ?>/ajax-post/",{id: post_id}); console.log();
            return false;
        });

这使用委托来监视 '.previousNav' 并为 all 注册提供的功能a，无论它们何时添加（同样适用于nextNav）

于 2013-06-03T07:21:23.167 回答