I am loading the same html forms to different pages of my site and I have noticed that the jquery functions are not executing as expected on these other forms (at all). I believe I need to use .on() handler to connect the event handlers after the load. Is this correct. In this case index.html has a toolbar.html loaded after a click event which has a select box with the id of #action
currently my jquery is in common.js loaded via script tags in index.html
so
$('#toolbar').load('toolbar.html'); // loaded later sometime
$("#action").change(function() {
alert("hello");
});
will become
$('#toolbar').load('toolbar.html'); // loaded later sometime
$("#action").on("change", function(){
alert("hello);
});
It looks like you try to add an event listener before toolbar.html is loaded onto the page.
Try using a callback for when the load request is complete, like this:
$('#toolbar').load('toolbar.html', function () {
// this will be run when toolbar.html is loaded into #toolbar
$("#action").on("change", function () {
alert("hello");
});
});
By the way, both code examples you posted perform the exact same thing, so it doesn’t matter which method you use.
If I have a more complex form (like a ‘quick add contact’ (QAC) form ) that has alot more methods and functions but it can be loaded from different pages this solution would require me to duplicate the quick add code on the different pages, or should I have any methods and functions related to the QAC as a seperate qac.js file.
I am still a little lost as to how many js files are too many, js files by form, one with everything etc. Is there a recommended way to structure them, for a web business app. contacts, notes projects etc.
An external .js file would be best, aside from having it included in the main .js that your site uses.
That would not only allow easy changes to one file, but would produce a more readable HTML source file and wouldn’t require you to copy the full code to each page.
As few as possible, ideally. I think the best way is to put as much as you can into one .js file, and the rest into separate .js files.
In order to put all the .js files into one file, that would require each one to not interfere with each other (different namespaces, ideally). The ones that interfere can be kept as separate .js files.