Динамически добавлять и удалять Заголовок сообщения

Question

На моем сайте Wordpress я создаю поиск и поиск Ajax 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(); 
} 

После успешно искать с помощью Ajax Теперь мне нужно добавить post_title из поиска в Див id="post-container" динамически.

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 

создать кнопку ADD в результате поиска, чтобы добавить POST_TITLE в DIV.

Как динамически добавлять post_title из поля поиска в div с помощью кнопки?

Answer 1

Вы имеете прикрепить нажмите событие в кнопку, получить post_title и append его в DIV:

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

Надеется, что это помогает.

$(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

Написать обе дивы в функции 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:

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