I am using require js and jquery for my current project. And I am wondering what would be the best way to make use of document.ready with require.js.
my current file structure :
main.js
define(["Jquery"], function () {
$(document).ready(function () {
$("#SomeButton").click(function () {});
});
test.js
define(["main"], function () {
$(document).ready(function () {
$("#AnotherButton").click(function () {
});
});
test1.js
define(["main"], function () {
$(document).ready(function () {
$("#AnotherButton").click(function () {
});
});
As you can see, I am using document.ready in each of the three files. Is it better way to write the code that makes use of document.ready without defining this event in each module file. I want to keep these module as it is, but just want to make sure that dom is ready before the codes gets executed.
one thing i can do is in main.js document.ready event load all the modules file. but as i have different pages that uses different js files, combining all of them together is not an option.
Any help would be appreciated.