Question

I know this question has been asked but I haven’t found any satisfactory answers. I have a very simple html page that I want to load into a number of other pages. That’s no problem but where I’m getting stuck is that this html page has one jQuery hover function that simply will not execute on the other pages. I’ve tried putting the hover function on each page, I’ve tried .getScript. From what I understand, jQuery will load the scripts from the .load() page, execute them, then remove them. But since it’s a hover function I need those scripts to stay around. Is there any way I can do this?
I’ll post the code if necessary but it works perfectly so I don’t think it’s that…

on each page:

    if ($("#zz7_Menu:contains('myname')")) {
    $("#toolbar").load('toolbar.html table.toolbaradmin');
}
else {
    $("#toolbar").load('/toolbar.html table.toolbar');
}

toolbar.html:

<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" href="jquery-ui/css/redmond/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />

<script>
    $(document).ready(function() {
    $('.ui-state-default').hover(function() {
        $(this).removeClass('ui-state-default').addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover').addClass('ui-state-default');
    });
    });
</script>

<table class="toolbar">
    <tr>
        <td class="ui-state-default ui-corner-all toolbar">

etc…

Answer 1

Try to move the hover code into a standalong JavaScript file (which you can load everywhere with <script src="...">).

Now use jQuery to install the hover function call again after .load() has completed successfully. After extracting, this should be a single line of code.