title: Javascript and jQuery Scripts Have a Conflict
body: <p>I seem to be gradually adding more and more Javascript and jQuery to my pages, and today it has turned around and bitten me. I have the following scripts in the  of my parent page:</p>
  
  <pre><code>&lt;script type="text/javascript" src="../floatbox/floatbox.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/calendar_min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  &lt;!--Script makes ToDate jump to FromDate
  MouseOver = true;
  function date_copy_set() {
      FirstMouseOver = true;
  }
  function date_copy() {
      if (FirstMouseOver &amp;&amp; MouseOver) {
          document.bookboxform.DepartureDate.value=document.bookboxform.ArrivalDate.value; // Main form
          frames.booking.DepartureDate.value=frames.booking.ArrivalDate.value; // Prices tab
          FirstMouseOver = false;
          MouseOver = false;
      }else{ }
  }
  --&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function shortlist(id) {
      var el = document.getElementById(id);
      if ( el.value == 'checked') {
          window.location.replace("../favouritesdrop.php?hid=" + id +"&amp;page=&lt;?php echo $full_url ?&gt;");
      }
      else {
          window.location.replace("../favouritesadd.php?hid=" + id +"&amp;page=&lt;?php echo $full_url ?&gt;");
      }
  }
  &lt;/script&gt;
  &lt;script&gt;
  &lt;!-- Tabs script --&gt;
  $(document).ready(function() {
      $("#tabcontent &gt; div").hide(); // Initially hide all content
      $("#tabs li:first").attr("id","current"); // Activate first tab
      $("#tabcontent div:first").fadeIn(); // Show first tab content
  
      $('#tabs a').click(function(e) {
          e.preventDefault();
          if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
              return       
          }
          else{             
              $("#tabcontent &gt; div").hide(); //Hide all content
              $("#tabs li").attr("id",""); //Reset id's
              $(this).parent().attr("id","current"); // Activate this
              $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
          }
      });
      $('#prices').load('../prices_col.php?hid=&lt;?php echo $hid;?&gt;');
      $("#prices").on('click', 'a.click', function() {
          $(".hiddenstuff").slideToggle(1000),
          $("a.click").toggleClass("faded");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The parent page has a tabbed area controlled by the Tabs Script shown above.</p>
  
  <p>One of those tabs contains the file <code>prices_col.php</code> which is ajax-loaded by a line of the script above.</p>
  
  <p><code>Prices_col.php</code> contains a hidden area that is revealed by jQuery. The hodden area contains two date boxes that have a date picker calendar which runs from <code>calendar_min.js</code>. There is another pair of date boxes in the parent page that also use the date picker.</p>
  
  <p>Everything works fine when the page is newly opened. Dates can be inserted in the main page or in the prices tab, and the calendar works correctly in both. However if I refresh the main page, the calendar no longer works in the prices tab (but still works in the main page). If I clear the browser cache before refreshing the main page everything works properly.</p>
  
  <p>I assume this indicates a conflict somewhere. How can I overcome this?</p>