在插件插件wordpress中调用AJAX之后重新加载我的脚本

Question

I am developing my plugin with content I show below:

IN index.php

<?php
    //I REGISTER BOOTSTRAP AND MY JQUERY FUNCTIONS
    add_action('wp_enqueue_scripts', 'ln_reg_css_and_js');
    function ln_reg_css_and_js()
    {
        if(is_single())
        {
            wp_enqueue_style('boot_css', plugins_url('inc/bootstrap.css',__FILE__ ));
        }
        wp_enqueue_script('boot_js', plugins_url('inc/bootstrap.js',__FILE__ ));
        wp_enqueue_script('ln_script', plugins_url('inc/main_script.js', __FILE__), ['jquery'], false, true);
        wp_localize_script( 'ln_script', 'myfunc', ['ajax_url' => admin_url( 'admin-ajax.php' )] );
    }

//I USE SHORTCODE FOR MY CONTENTS
add_shortcode('my_code', 'ln_my_short_code');
function ln_my_short_code()
{
//I USE A SIMPLE LINK TO SENT IT'S VALUE BY AJAX AND A <DIV> TAG TO SHOW MY MODAL
return "<div id='ln_modal_show'></div><a href='#' class='ln_myLink' data-target='$post_id'>Click me</a>";
}

/* MY FUNCTION TO CREAT AND CALL AJAX */
add_action( 'wp_ajax_nopriv_ln_handle_modal', 'ln_handle_modal');
add_action( 'wp_ajax_ln_handle_modal', 'ln_handle_modal');
function ln_handle_modal()
{
    $name       = $_POST['name'];
    $post_id    = $_POST['post_id'];
    $class_name = $_POST['class_name'];

    ln_include_path('main_modal.php');
    $ln_modal = new LN_Modal($name, $class_name, $post_id);
    echo $ln_modal->get_ln_modal();

    exit();  
}

IN main_modal.php

/* I HAVE A CLASS HERE, BUT WE WILL JUMP TO MAIN FUNCTION */

<?php
class LN_Modal
{
/* ........... */

/* YES, THIS IS MY PROPLEM, HOPE YOU WILL CONTINUE READING */
public function get_ln_modal
{
//HERE I HAVE AN EXAMPLE, ALMOST LIKE MY REAL CODE
// I USE A TOOLTIP INSIDE MY MODAL, BUT WHEN MODAL SHOWN, THE TOOLTIP NOT WORKS. IT'S LOOKS LIKE MY JQUERY CODE HAS STOP RUNNING AFTER AJAX WAS CALLED
$tooltip = "<div class='modal-body'>
                    <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='right' title='Show it'>
                    Tooltip in right</button>";";

return "<div class='modal fade' id='ln_Modal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
                <div class='modal-dialog modal-lg'>
                  <div class='modal-content'>
                    <div class='modal-header'>
                      <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button>
                      <h4 class='modal-title' id='myModalLabel'><center>$modal_title</center></h4>
                    </div>
                    </button>
                    $tooltip
                    $content
                    </div>
                    <div class='modal-footer'>
                      <center><button type='button' class='btn btn-primary' data-dismiss='modal'>ĐÓNG THÔNG TIN</button></center>
                    </div>
                  </div>
                </div>
              </div>";
}
}

AND IN MY main_script

/* I USED TWO FUNCTIONS HERE, ONE FOR CLICKING A LINK AND SENT AJAX REQUEST, ONE FOR SHOWS TOOLTIP

jQuery(document). ready(function(){
   jQuery(".ln_myLink"). click(function(){
       var name       = jQuery(this). html();
       var post_id    = jQuery(this). attr('data-target');
       var class_name = jQuery(this). attr('class');

       //Sent data
       jQuery.ajax({
           url  : myfunc.ajax_url,
           type : 'post',
           data : {
                action      : 'ln_handle_modal',
                name        : name,
                post_id     : post_id,
                class_name  : class_name
            },
            success : function(result){
                jQuery('#ln_modal_show').html(result);
                jQuery('#ln_Modal').modal('show');
            }
       });
   });
});

jQuery(function(){
    jQuery('[data-toggle="tooltip"]').tooltip();
});

The modal is shown good, but tooltip is not work.

Answer 1

You need to initialize tooltip on ajax success event. Try this in ajax success:

 success : function(result){
                jQuery('#ln_modal_show').html(result);
                jQuery('#ln_Modal').modal('show');

jQuery('[data-toggle="tooltip"]').tooltip(); // intialize tooltip on success

            }