Question

我在wordpress中使用ajax通过点击帖子列表来显示帖子的内容。

我的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();
}

以及如何在wordpress中声明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时，我想添加next / prev按钮来更改显示内容但我没有动作，没有响应，点击不起作用，如果它不是jquery

抱歉，我的英语，我是法国人。

Answer 1

这个问题并非特定于Wordpress。问题是当您为类.ajax_post_content的元素声明“click”事件处理程序时，PHP函数中创建的按钮不在页面上。它们仅在您进行ajax调用后才存在。因此，事件不会绑定到这些新元素，因为声明事件的代码在元素不存在的时候运行了。

您需要使用的是委派活动。您将事件附加到DOM层次结构中的某个元素，您知道在事件处理程序代码运行时肯定存在（即在您的情况下为页面加载）。然后它可以处理与你给它的选择器匹配的任何后代元素的事件，无论那个时刻是否存在这些后代元素。

语法如下：

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

#SomeStaticElement可以是任何有效的jQuery选择器，包括document，只要它位于DOM层次结构的上方，而不是要将事件附加到动态生成的元素。

有关委托事件的更多讨论和示例，请参阅此处的jQuery文档：http://api.jquery.com/on/

ajax在wordpress中加载响应后的ajax动作

1 个答案: