title: Why won't my code run when in external.js file but does if in HTML
body: <p>I'm trying to get a <code>Javascript/jQuery</code> code snippet to run from an external <code>.js</code> file.</p>
  
  <p>It ran fine when within script tags at the bottom of my asp.net html page but now it's in an external <code>JS</code> file it doesn't run. I have successfully inserted (dynamically) a link to the external file (Viewable in page source) and been able to fire a popup alert from inside it, so I know the external file is being accessed correctly. I've also got my reference to <code>JQuery</code> before the external file, but the following script will not fire / run? any ideas would be great, thanks.</p>
  
  <pre><code>$("#&lt;%=sDatepicker.ClientID%&gt;").focus(function () {
    //$(this).blur();
    alert("Handler for .Datepicker called.");
  });
  </code></pre>
  
  <p>As  you can see I'm trying to access a <code>Textbox</code> with <code>ID=sDatepicker</code>, but asp.net adds a <code>ClientID</code> before it so I need to get that to find the actual <code>TextBox</code>.</p>
  
  <p>I have considered the page may not have loaded and the <code>TextBox</code> control may not exist as the external <code>JS</code> file is in the <code>Head</code> of my document, but I have also tried adding</p>
  
  <pre><code>$('document').ready(function () { });
  </code></pre>
  
  <p>around the script in the  JS file, but this doesn't seem to help.</p>
  
  <p>Like I said, it worked fine when in the <code>HTML</code> page, but I need to only reference the external file under certain circumstances, so need to add it from my C# code behind dynamically when required.</p>
  
  <p>cheers.</p>
  
  <h3>update from feedback below in regards possible solution 1.</h3>
  
  <p>I now have in my external <code>JS</code> file the following:</p>
  
  <pre><code>$(document).ready(function () { keypadSuppress(); });
  </code></pre>
  
  <p>and in my <code>.aspx</code> <code>HTML</code> file I have the following:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function keypadSuppress() {
              $("#&lt;%=sDatepicker.ClientID%&gt;").focus(function () {
                  $(this).blur();
                  alert("Handler for sDatepicker called.");
              });
  
              $("#&lt;%=eDatepicker.ClientID%&gt;").focus(function () {
                  $(this).blur();
                  alert("Handler for eDatepicker called.");
              });
      }
  &lt;/script&gt;
  </code></pre>
  
  <h3>Update 2</h3>
  
  <p>Tried the above code in the Update above and its working fine today (the gremlins must be asleep still). The only change I made was to add an alert to the <code>Document.ready</code> function to flag up when it was accessed, but this was not the issue. The above code works fine as is.</p>
  
  <p>Only other thing I needed to do was add a <code>&lt;div&gt;</code> around it which I made visible='true' or visible='false' depending on whether I tested for a mobile or not, in my C# code behind using </p>
  
  <pre><code>bool IsMobile = Page.Request.Browser.IsMobileDevice;
  </code></pre>
  
  <p>Thanks, we got there eventually :)</p>