title: A simpler way to use document.ready with require js
body: <p>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. </p>
  
  <p>my current file structure :</p>
  
  <p>main.js</p>
  
  <pre><code>define(["Jquery"], function () {
  $(document).ready(function () {
          $("#SomeButton").click(function () {});
  });
  </code></pre>
  
  <p>test.js</p>
  
  <pre><code>define(["main"], function () {
  $(document).ready(function () {
  
          $("#AnotherButton").click(function () {
  });
  });
  </code></pre>
  
  <p>test1.js</p>
  
  <pre><code>define(["main"], function () {
  $(document).ready(function () {
         $("#AnotherButton").click(function () {
  });
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Any help would be appreciated.</p>