AJAX加载破坏了我的媒体上传器和颜色选择器？

I have tabbed navigation inside wordpress admin page and it works fine by itself (i can save my data)

and now I want to add some ajax when toggling between pages.

But the problem is that when I load my tab colorpicker and media uploader are not working anymore,

but I can still save data not related to media uploader and colorpicker like check boxes for example.

It loads my form properly but not my scripts:(

My AJAX Call looks like this:

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

jQuery('.nav-tab').on('click', function(e){

e.preventDefault();

jQuery('.form_options').fadeOut().load(jQuery(this).attr('href') + ' .form_options',function(){
jQuery('.form_options').fadeIn();
});/*End load callback function*/

});/*End click function*/
});

I am using this code to call my scripts inside admin page:

add_action( 'admin_init', 'register_override_theme_js' );
function register_override_theme_js() {
    /* Register our main Admin js script. */
    $file_dir = get_template_directory_uri();
    wp_register_script( 'my-admin-script', $file_dir . '/js/admin_ajax.js', false, '1.0' );
    /*Register our Iris Colorpicker js script. */
    wp_register_script( 'my-color-picker', $file_dir . '/js/colorpicker_script.js', array( 'wp-color-picker' ), false, true );

    /* Register our uploader js script. */
    wp_register_script( 'uploader', $file_dir . '/js/uploader.js', false, '1.0' );
}



function my_plugin_admin_scripts() {
    /* Link our already registered script to a page */
    wp_enqueue_script( 'my-admin-script' );
    wp_enqueue_script( 'uploader' );
    wp_enqueue_script( 'my-color-picker' );
        if ( ! did_action( 'wp_enqueue_media' ) ){
        wp_enqueue_media();
        }
    }

 function my_plugin_admin_styles() {
    /* Link our already registered css to a page */
    wp_enqueue_style( 'admin_style' );
    wp_enqueue_style( 'wp-color-picker' );
    }

Does anyone have an idea what I am doing wrong here? Any thoughts or suggestions are welcome. Thanks!

I would say your problem is that if you are loading each tab by AJAX then colour picker and media uploader javascript is not being initialised properly.

Let me clarify:

Without AJAX:

all scripts loaded - they probably have document.ready clauses in them and click events that aren't 'live' events - (.click rather than .on)

These work fine when you have everything on the page at the start as all elements exist in the DOM

With AJAX:

You load 1 'tab' in at a time.

All your javascript is already loaded.

This means tabs 2 & 3 HTML is not yet on the page.

Any selector that isn't live:

$('#colourpicker').click()

Will not work if id="colourpicker" does not exist on the page at first load.

Two solutions:-

edit all code to use .on instead of .click (in any libraries you are using)

Load the javascript dynamically during the AJAX call

Hope that is clear!