title: JavaScript variable not defined error?
body: <p>We have three JS files:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/pm.init.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/pm.util.func.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="js/pm.nav.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>In init.js we have: </p>
  
  <pre><code>$(function(){
      var dirty = false;
  })
  </code></pre>
  
  <p>In util.func.js we have:</p>
  
  <pre><code>function dirtyCheck(actionFunction) {
      if (dirty == false) {
          actionFunction();
          return;
      }
      ...
  </code></pre>
  
  <p>And in nav.js we have:</p>
  
  <pre><code>$(function(){
      $('#btn-nav-refresh').click(function() {
          dirtyCheck(function() { doRefresh(); });
      });
      ...
  </code></pre>
  
  <p>Now when the <code>btn-nav-refresh</code> function fires after a user clicks the button we get a <code>dirty is not defined</code> error.  Why is this??</p>