Cache breaks functionality? I have added some jQuery functionality to create a popup when hovering over a link to the script.js file included with the particular theme I am using. It is enclosed in jQuery(document).ready(function($) {}.

It works perfectly at first, but it seems that once Drupal 7 caches/aggregates the script.js file, it no longer works at all. I'm not 100% sure it is a caching related issue, as it works fine for hours, but eventually stops working. Clearing the CSS/JS cache after it stops working makes it work again.

function contactLinkInit() {
        var div = '&lt;div class="contact-popup"&gt;' +
                '10320 Globe Road&lt;br/&gt;Morrisville, NC 27560&lt;br/&gt;' +
                'Phone: &lt;a href="tel:919-361-4333"&gt;919-361-4333&lt;/a&gt;&lt;br/&gt;' +
                'Fax: 919-361-4388&lt;br/&gt;' +
                '&lt;a href="mailto:info@dosoffice.com"&gt;info@dosoffice.com&lt;/a&gt;';

        var firstRun = true;
        var firstEntered = true;
        var enteredPopup = false;

        $("a.contact-link").mouseover(function(event) {
            if (firstRun) {
                $("body").append(div); 

                $("div.contact-popup").mouseover(function() {
                    if (!firstEntered) {
                        enteredPopup = true;
                    }
                    else {
                        firstEntered = false;
                    }

                    $("div.contact-popup").css('visibility','visible'); 
                });

                $("div.contact-popup").mouseout(function() {
                    enteredPopup = false; 
                    $("div.contact-popup").css('visibility','hidden');   
                });

                $("a.contact-link").mouseout(function() {
                    if (!enteredPopup) {
                        $("div.contact-popup").css('visibility','hidden'); 
                    }   
                });
                firstRun = false;
            }
            $('div.contact-popup').css('left',event.pageX + "px");      // &lt;&lt;&lt; use pageX and pageY
            $('div.contact-popup').css('top',event.pageY + "px");   
            $("div.contact-popup").css('visibility','visible'); 
        });
    }

    contactLinkInit();


I'm sure what I've done here is not best practice, neither Javascript nor Drupal are my forte. Not only am I looking for a solution to the problem itself, I certainly wouldn't mind suggestions as how to improve the code itself.
I have redone my code as suggested in the comments so that it uses Drupal behaviors and the Drupal's javascript-api. I also moved my code out of the existing theme's script.js to its own file, and added that file to the scripts array in the theme's .info file.

Below is my updated code, in case it should help anyone that encounters this same sort of problem and is unfamiliar with Drupal behaviors. This has solved my problem with my code no longer working once the JS is aggregated and/or cached.

   (function($) {
     Drupal.behaviors.contactLinkHoverPopout = {
         attach: function(context, settings) {
             var div = '&lt;div class="contact-popup"&gt;' +
                 '10320 Globe Road&lt;br/&gt;Morrisville, NC 27560&lt;br/&gt;' +
                 'Phone: &lt;a href="tel:919-361-4333"&gt;919-361-4333&lt;/a&gt;&lt;br/&gt;' +
                 'Fax: 919-361-4388&lt;br/&gt;' +
                 '&lt;a href="mailto:info@dosoffice.com"&gt;info@dosoffice.com&lt;/a&gt;';

             var popupVisible = false;

             // we only want mouseovers applied once!   
             $('a.contact-link', context).once(function() {
                 // add the invisible popup div
                 $('body', context).append(div);

                 // add mouseover to contact-link
                 $('a.contact-link', context).mouseover(function() {
                     $('div.contact-popup', context).css('left', event.pageX + "px");
                     $('div.contact-popup', context).css('top', event.pageY + "px");
                     $('div.contact-popup', context).css('visibility', 'visible');
                     popupVisible = true;
                 });

                 $('div.contact-popup', context).mouseover(function() {
                     $('div.contact-popup', context).css('visibility', 'visible');
                     popupVisible = true;
                 });

                 $('a.contact-link', context).mouseout(function() {
                     if (popupVisible) {
                         $('div.contact-popup', context).css('visibility', 'hidden');
                         popupVisible = false;
                     }
                 });

                 $('div.contact-popup', context).mouseout(function() {
                     if (popupVisible) {
                         $('div.contact-popup', context).css('visibility', 'hidden');
                         popupVisible = false;
                     }
                 });
             });
         }
     };
 }(jQuery));