は動的に追加して、私のワードプレスのウェブサイトでは記事のタイトル

Question

を削除し、私はAjaxの検索を作成し、post_titleを検索します。 sucessfully今私は動的にid="post-container"をDIVするために、検索からpost_titleを追加する必要がアヤックスで検索した後

<?php 
add_action('wp_footer', 'ajax_fetch'); 
function ajax_fetch() { 
?> 
<script type="text/javascript"> 
    function fetch(){ 
    jQuery.ajax({ 
     url: ajaxwpse.ajaxurl, 
     type: 'post', 
     data: { action: 'data_fetch', keyword: jQuery('#keyword').val() }, 
     success: function(data) { 
      jQuery('#datafetch').html(data); 
    } 
    }); 
} 
</script> 
<?php 
} 
add_action('wp_ajax_data_fetch' , 'data_fetch'); 
add_action('wp_ajax_nopriv_data_fetch','data_fetch'); 
    function data_fetch(){ 

    if ( esc_attr($_POST['keyword']) == null) { die(); } 
    $the_query = new WP_Query(array('posts_per_page' => -1, 's' => esc_attr($_POST['keyword']), 'post_type' => array('mobile','tablet'))); 
    if($the_query->have_posts()) : 
    while($the_query->have_posts()): $the_query->the_post(); ?> 

    <div> 
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button> 
    <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div> 

    <?php endwhile; 
    wp_reset_postdata(); 
    endif; 
    die(); 
} 

：コードはここに...

機能とスクリプトです。私はdiv要素にPOST_TITLEを追加するために、検索結果にADDボタンを作成

HTML

<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input> 

<div id="datafetch"></div> // successfuly ajax Search Result Here 

<div id="post-container"> </div> // Trying to add post title here 

。

検索フィールドのpost_titleをボタンを使ってdivに動的に追加する方法はありますか？

$(function(){ 
    $('body').on('click', '.post-link', function(){ 
     var post_title = $(this).closest('div').find('a').text(); 
     $('#post-container').append(post_title); 
    }); 
}); 

・ホープ、このことができます：

Answer 1

あなたがボタンにイベントをクリックしDIVにpost_titleとappendそれを得る添付しました。

$(function(){ 
 
    $('body').on('click', '.post-link', function(){ 
 
    var post_title = $(this).closest('div').find('a').text(); 
 

 
    if($('#post-container p').length < 4) 
 
    $('#post-container').append('<p>' + post_title + ' ------ <a href="#" class="remove-title">REMOVE</a></p>'); 
 
    else 
 
     alert('You could add max 4 titles'); 
 
    }); 
 

 
    $('body').on('click', '.remove-title', function(){ 
 
    $(this).closest('p').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <button class="post-link"> ADD </button> 
 
    <li> 
 
    <a href="#">The title 1 HERE</a> 
 
    </li> 
 
</div> 
 

 
<div> 
 
    <button class="post-link"> ADD </button> 
 
    <li> 
 
    <a href="#">The title 2 HERE</a> 
 
    </li> 
 
</div> 
 

 
<div> 
 
    <button class="post-link"> ADD </button> 
 
    <li> 
 
    <a href="#">The title 3 HERE</a> 
 
    </li> 
 
</div> 
 

 
<hr> 
 
<div id="post-container"> </div>

Answer 2

このように、単一<div>に入れて、あなたのPHPの機能の両方のdivを作曲：

PHP：

add_action('wp_ajax_nopriv_data_fetch','data_fetch'); 
function data_fetch(){ 

    if ( esc_attr($_POST['keyword']) == null) { die(); } 
    $the_query = new WP_Query(array('posts_per_page' => -1, 's' => esc_attr($_POST['keyword']), 'post_type' => array('mobile','tablet'))); 
    if($the_query->have_posts()) : 

    // compose $post_title 
    $post_title = "..."; 

    echo "<div id=\"datafetch\">"; 
    while($the_query->have_posts()): $the_query->the_post(); ?> 

    <div> 
    <button class="post-link" rel="<?php the_ID(); ?>"> ADD </button> 
    <li><a href="#" id="<?php the_ID(); ?>"><?php the_title();?></a></li> 
    </div> 

    <?php endwhile; 
    echo "</div><div id=\"post-container\">" . $post_title . "</div>"; 
    wp_reset_postdata(); 
    endif; 
    die(); 
} 

HTML：

<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input> 

<div id="result"></div> 

JS：代わりに＃1 datafetch` `の内容だけを交換する

// in your ajax call 
success: function(data) { 
    jQuery('#result').html(data); 
}