jQuery .load() with scripts

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...

the scripts "staying around" has nothing to do with whether they work or not. Once a script is ran, it doesn't need to stick around, removing it from the dom does not undo anything that the script did. I suggest posting some code — user400654
– user400654, Commented Sep 8, 2011 at 14:41

Aaron Digulla · Accepted Answer · 2011-09-08 14:40:36Z

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.

answered Sep 8, 2011 at 14:40

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kramden88 Over a year ago

Noob question but how would I install the hover function?? Thanks!

user400654 · Accepted Answer · 2011-09-08 15:29:16Z

0

Move the javascript that affects the table to AFTER the table. Since the document is already ready, it gets ran immediately, which happens to be before the table is added to the page. Also, if jquery is included in the parent page already, you don't need to include jquery in the page you are loading.

<table>
  <!-- ... table stuff ... -->
</table>
<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>

answered Sep 8, 2011 at 15:29

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery .load() with scripts

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related