is it possible to re-initialize all-plugins for jQuery after ajax call?

Question

If i received ajax response using $.post(...) , $.get(...) or something.

received response is a html format document and includes jQuery plugins.

i know jQuery plugin needs to reinitialize after ajax response. something like this

$.get('<ajaxurl>').done(function(response){
    $('#some_element').html(response);
    $('#element1_in_some_element').init_plug_in_1();
    $('#element2_in_some_element').init_plug_in_2();
    $('#element3_in_some_element').init_plug_in_3();
    $('#element4_in_some_element').init_plug_in_4();
    ....
});

But is it possible to re-initialize all plugins after ajax call?

like this

$.get('<ajaxurl>').done(function(response){
    $('#some_element1').html(response);
    $('#some_element1').init_plug_in_all();
});

!!

Answer 1

If you bind to the document, it should allow you to have dynamically added elements on the page which have your plugin automatically applied.

For example

$('.datePickers').datepicker();

will only fire on document load, and any NEW elements with the "datePickers" class will not have the functionality available.

But if you attach like this...

$(document).on('load','.datePickers', function() {
     $(this).datepicker();
});

It will apply to all elements with the datePickers class, even those added via AJAX

Answer 2

If you make a function to initialize the plugins, you can call that function when ajax call ends to reinitialize all your plugins. There aren't nothing standard to this, all depends on your plugins and your initializators. Consider something like this:

var initializePlugins = function() {
  $('selector').datepicker();
  $('selector2').fullcalendar();
  $('selector3').jScrollPane();
};

// when ajax done
$.ajax().done(function() {
  initializePlugins();
});

// when the DOM is ready        
$(document).ready(function() {
  initializePlugins();
});

Answer 3

If you want $('#some_element1').init_plug_in_all(); then you could write a plugin.

$.fn.init_plug_in_all = function(plug_1, plug_2, plug_3, plug_4){

  this.each(function() {

    plug_1 && $(this).init_plug_in_1();
    plug_2 && $(this).init_plug_in_2();
    plug_3 && $(this).init_plug_in_3();
    plug_4 && $(this).init_plug_in_4();

  });
};

then use like:-

$('#some_element1').init_plug_in_all(true, false, false, true);
$('.some_class').init_plug_in_all(false, false, true, true);
//etc