How to make javascript and css dynamic?

Question

I am including header.php and footer.php in each of my page and I am loading the remaining contents of each page via ajax. My jquery codes are at footer.php. Now on initial load everything seems fine but whenever I navigate to the next page the jquery codes are not working. They do work if I include them in the body of each page but that however increases page load time. Also I donot need all the jquery for one page. How to call jquery dynamically according to page url?

Answer 1

Use jQuery .on() to define click events :

ex :

$(document).on( eventName, selector, function(){ } );

or

define Click Events in the html, you get from ajax.