-1

Ajax を使用してコンテンツをロードする div (i) があります.load()。

その div (i) が読み込まれると、前または次の投稿を開く 2 つのアンカー リンクがあります。

これらの次のリンクと前のリンクは、それぞれ生成された 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;
        });
    });
});

から出力が得られないかconsole.log()、Chrome コンソールでエラーが発生します。

これは 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 aとは各 ajax ロード後に更新されるため.nextNav a、イベント ハンドラーは 2 回目は起動しません。ただし、イベント委任では、イベント ハンドラーを現在および将来の要素にアタッチします。

参考文献:

  • .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」を監視し、aいつ追加されたかに関係なく、すべての提供された関数を登録します（同じことが にも当てはまりますnextNav）

于 2013-06-03T07:21:23.167 に答える