JQuery and Variables in Multiple JS files
<p>I am having variables that reference html ID's like</p>

<pre><code>&lt;div data-role="footer" id="ftrPaxFlight"&gt;
    &lt;h4&gt;&amp;#169; 2012, BT&lt;/h4&gt;
&lt;/div&gt;
</code></pre>

<p>and I am having a javascript embedded in html using jQuerry which is like</p>

<pre><code>&lt;script&gt;
  $(document).ready(function() {
            var ftrPaxFlight = $('#ftrPaxFlight');
    var butMainLogin = $('#butMainLogin');
    var butMainSetup = $('#butMainSetup'); 
       .....
      butMainLogin.bind("click", function() {
           getChangeFtr();
    });
</code></pre>

<p>Where getChangeFtr is a function located in an external .js file. I want to seperate the logic from UI. This file is also included under tags </p>

<pre><code>function getChangeFtr(){
     alert("Ftr will be changed " + ftrPaxFlight);
 }
</code></pre>

<p>When the button is clicked .. the method getChangeFtr() is called, I am getting an error - TypeError - ftrPaxFlight is undefined.</p>

<p>Can someone guide me to the right way of passing variables to multiple javascript files using jQuery..?
thanks
D</p>
