AJAX based site: how to apply javascript?

Hello everyone!

So I’m in the proccess of creating an AJAX based WP theme. This is the state I’ve reached so far:

  • Capture all menu link clicks with .on(‘click’)
  • Change status bar with history.pushState() method (**#**hashtag method is not an option)
  • Get the preferred content with $.get() method and place it in the page section

The problem:
The javascripts are not applied to the newly added content.

What I tried:

  • Tried to use different load methods .load(url+’ #content’), etc., finally I figured out the scripts should be executed again after I load them into the page (or not? :slight_smile: ) so…
  • I collected all scripts from the requested page’s head and run them with $.getScript() method. Result: page became slow and in some cases it seemed like it fell into a loop

So the question is: how can I apply all the javascripts to the requested AJAX content? I know about firing functions after AJAX is complete but I need a universal solution which can handle newly added scripts as well (from WP plugins’ scripts, etc). What is the best practice to handle this?

Please let me know if I approach the whole thing wrong or you have a better idea! Thank you in advance!


I had this problem with 2 of my themes. Panama and Trend and fully ajaxified themes. We used djax to get the content on click. But the problem was with the 3rd party plugins. This is why we added the option to deactivate the ajax loading for those who have problems with external sources. Not very elegant, but I couldn’t find other solution.

Hello! That’s the exact same way what I did in my Empire II theme. But I’d like to solve this somehow.

A working solution so far is to collect scripts from the requested page and re-execute only those which has the wp-content/plugins in their path. It seems to be working however it’s not a bulletproof method I guess, since there might be inline scripts as well.