While developing a web application using the smartAdmin Template, an ajax-based template that you can preview here, I encountered some challenges. The issue I faced was that when I wrote a JavaScript function on one page, it affected all pages.
For example:
$(document).on('click', '#elementA', function(){
alert('Hello World');
});
This code snippet worked on other elements of pages with the same id. It became impractical to assign unique ids to every element due to the project's size and complexity, which I have been working on for six months. In my quest to find a solution, I attempted giving each page a unique id and modifying the script as follows:
$(document).on('click', '#pageA #elementA', function(){
alert('Hello World');
});
Although this seemed to solve the initial issue, the function stopped working on other elements of different pages. Additionally, upon revisiting #PageA for the second time, the function ran twice. It appears that the template stores user-defined functions in local memory storage (my assumption, not confirmed) and continues to accumulate them until the entire template is refreshed.