Re-initialize other javascript functions after page load with ajax pagination

Question

Apologies, general newbie here. How to load other plugins and let other individual scripts function after loading the created ajax page? This is my current code:

jQuery(document).ready(function($) { var $mainContent = $("load-content"), siteUrl = "http://" + top.location.host.toString(), url = ''; $(document).delegate("a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", "click", function() { if($.browser.msie){ var myie="/"+this.pathname; location.hash = myie; //alert(location.hash); }else{ location.hash = this.pathname; } return false; }); $("#searchform").submit(function(e) { $search = $("#s").val(); $search = $.trim($search); $search = $search.replace(/\s+/g,'+'); location.hash = '?s='+$search; e.preventDefault(); }); $(window).bind('hashchange', function(){ url = window.location.hash.substring(1); if (!url) { return; } url = url + " #content"; $('html, body, document').animate({scrollTop:0}, 'fast'); $mainContent.fadeOut(500, function(){$('#content').fadeOut(500, function(){ $("#loader").show();});}).load(url, function() { $mainContent.fadeIn(500, function(){ $("#loader").hide(function(){ $('#content').fadeIn(500);});});}); }); $(window).trigger('hashchange'); }); 

How do embedded objects on pages retain their functionality? Mostly videos, slide shows and other media that use javascript, for example

video js (html5 video player)

Vimeo

and

slide show for wordpress

Answer 1

When loading ajax-generated markup, it will not preserve pre-existing functions. In the above example, you initialize things when the DOM is ready for action. To make sure all plugins, etc. Launched after executing the ajax request, you need to reinitialize them.

Given your code example above, I would recommend a little restructuring. For example, you can create a function called init that you could call to initialize certain plugins:

 function init () { $("#plugin-element").pluginName(); } jQuery(document).ready(function () { // Initialise the plugin when the DOM is ready to be acted upon init(); }); 

Then, after that, with a successful callback of your ajax request, you can call it again, which will reinitialize the plugins:

 // inside jQuery(document).ready(...) $.ajax({ type: 'GET', url: 'page-to-request.html', success: function (data, textStatus, jqXHR) { // Do something with your requested markup (data) $('#ajax-target').html(data); // Reinitialise plugins: init(); }, error: function (jqXHR, textStatus, errorThrown) { // Callback for when the request fails } });