ajaxアクションの後にwordpressで応答をロードしました

Question

私はajaxをwordpressで使用して、投稿のリストをクリックして投稿の内容を表示します。

私のAjax：

(function($) { 
$(document).ready(function() { 

    $('.ajax_post_content').click(function() { 

     var post_id = jQuery(this).attr('id'); 

     //console.log('cliqué : '+post_id); 

     jQuery.ajax({ 
      url : display_post.ajax_url, 
      type : 'post', 
      data : { 
       action : 'display_post', 
       post_id : post_id 
      }, 
      success : function(response) { 
       //alert(response) 
       $('.fullnews').html(response); 
       var thumbH = $('.fullnews .left').height(); 
       $('.fullnews .right').css('height',thumbH+'px'); 
       //console.log(thumbH); 

      } 
     }); 

    }); 

}); 

})(jQuery); 

私の機能：

add_action('wp_ajax_nopriv_display_post', 'display_post'); 
add_action('wp_ajax_display_post', 'display_post'); 

function display_post() { 
if (defined('DOING_AJAX') && DOING_AJAX) { 
    $post_id = $_POST['post_id']; 

    $args = array(
     'post_type' => 'post', 
     'posts_per_page' => -1, 
     'post__in' => array($post_id) 
    ); 
    $query = new WP_Query($args); 
    if ($query->have_posts()): 
     while ($query->have_posts()): 
      $query->the_post(); 

      $next_post = get_next_post(); 
      $prev_post = get_previous_post(); 

      echo '<a id="'.$next_post->ID.'" href="#" class="ajax_post_content arrow-left"></a>'; 
      echo '<a id="'.$prev_post->ID.'" href="#" class="ajax_post_content arrow-right"></a>'; 
      echo '<div class="col-md-1"></div>'; 
      echo '<div class="col-md-5 left">'; 
       echo '<span class="title">'.get_the_title(get_the_ID()).'</span>'; 
       echo '<div class="content">'.get_the_content(get_the_ID()).'</div>'; 
      echo '</div>'; 
      echo '<div class="col-md-5 right" style="background: url('.get_the_post_thumbnail_url().') center center/cover;"></div>'; 
      echo '<div class="col-md-1"></div>'; 
      echo '<div class="clear"></div>'; 

     endwhile; 
    endif; 
} 
die(); 
} 

とどのように私はワードプレスでAJAXを宣言：

wp_register_script('ajax', get_template_directory_uri().'/js/ajax.js', 'jquery', time(), true); 
    //wp_register_script('ajax', get_template_directory_uri().'/js/ajax.js', 'jquery', '', true); 
    wp_enqueue_script('ajax'); 
    wp_localize_script('ajax', 'display_post', array(
     'ajax_url' => admin_url('admin-ajax.php') 
    )); 

私の問題は、次のとおりです。内容はAjaxで表示しているとき、私はコンテンツを表示する変更するには、次の/前のボタンを追加するが、私は何のアクションも、応答がない、クリックdoesn ' jqueryでない場合のように動作します

私の英語のために申し訳ありません、私はフランス語です。

Answer 1

この問題は、Wordpressにはあまり関係ありません。問題は、クラス.ajax_post_contentの要素の「クリック」イベントハンドラを宣言すると、PHP関数で作成されたボタンがページに表示されないことです。彼らはあなたがajax呼び出しを行った後にのみ存在します。したがって、イベントが宣言されたコードが要素が存在しないときにしばらく前に実行されたため、イベントはこれらの新しい要素にバインドされません。

委任イベントが必要です。イベントハンドラのコードが実行されるとき（つまり、あなたのケースではページの読み込み時）に確実に存在することがわかっているDOM階層の上の要素にイベントをアタッチします。それらの子孫要素がその瞬間に存在するかどうかにかかわらず、それを与えるセレクタに一致する任意の子孫要素のイベントを処理できます。

構文は次のようなものです：

$("#SomeStaticElement").on("click", ".ajax_post_content", function() { 

#SomeStaticElementは限り、それはあなたがにイベントを添付したい動的に生成された要素よりもDOM階層まで高いほど、documentを含む任意の有効なjQueryのセレクタ、することができ。

より多くの議論や委任イベントの例については、ここでjQueryのドキュメントを参照してください：http://api.jquery.com/on/