Events bound using `hover()` are not firing after reloading page using `load()`

Question

These are the two scripts I have: One is a navigation script for an AJAXing effect and one is for a hover effect.

<!--Band Images-->      
    <script type="text/javascript">
        $(document).ready(function(band) {

            var name = "";

            $(".home-roll-box").hover(function() {
                name = $(this).attr("id");
                $("#image-" + name).stop().show().animate({
                    opacity: 1
                });
            }, function() {
                name = $(this).attr("id");
                $("#image-" + name).stop().animate({
                    opacity: 0
                });
            });
        });
    </script>
    <!--/Band Images-->

    <!--Navigation-->
    <script type="text/javascript">
        $.ajaxSetup({
            cache: false
        });

        $('ul.navigation li a').click(function(nav) {
            $('ul.navigation li.page_item.current_page_item').removeClass('current_page_item');
            $('ul.navigation li.page_item a.active').removeClass('active');
            $('#content-wrap').animate({
                top: "-2000px"
            }, 1000);

            var targetPage = $(this).attr('href');
            targetPage += " #content";

            setTimeout(function() {
                $('#content-wrap').load(targetPage, function() {
                    $('#content-wrap').animate({
                        top: "0px"
                    }, 1000);
                });
            });
            $(this).addClass('active');
            nav.preventDefault();
        });
    </script>
<!--/Navigation-->

Once the code which alters the navigation has executed, the other code (the event handlers bound for the band images using hover()), fail to run.

Any thoughts?

Answer 1

If your load is re-loading the part of your DOM which contain your .home-roll-box elements, you'll find the new elements inserted by your load call will not have the event handlers bound to them.

hover uses bind behind the scenes; which only binds handlers to elements currently in the DOM. Future elements will not have those handlers bound to them. Use live instead; which binds handlers to all current, and future elements that match the selector (you should also look at delegate, to complete the set of ways-to-bind-event-handlers-in-jquery).

$(".home-roll-box").live('mouseenter', function() {
    name = $(this).attr("id");
    $("#image-" + name).stop().show().animate({
        opacity: 1
    });
}).live('mouseleave', function() {
    name = $(this).attr("id");
    $("#image-" + name).stop().animate({
        opacity: 0
    });
});

Answer 2

Thanks to @Matt for the answer, but there was a very slight error in his code.

Fully functioning with the following:

<!--Band Images-->      
    <script type="text/javascript">
    $(document).ready(function() {

            var name = "";

                $(".home-roll-box").live('mouseenter', function() {
                    name = $(this).attr("id");
                    $("#image-" + name).stop().show().animate({
                        opacity: 1
                    });
                }).live('mouseleave', function() {
                    name = $(this).attr("id");
                    $("#image-" + name).stop().animate({
                        opacity: 0
                    });
                });
            });
    </script>
    <!--/Band Images-->

    <!--Navigation-->
    <script type="text/javascript">
            $.ajaxSetup ({ cache: false });

            $('ul.navigation li a').click(function(nav) {
            $('ul.navigation li.page_item.current_page_item').removeClass('current_page_item');
            $('ul.navigation li.page_item a.active').removeClass('active');
            $('#content-wrap').animate({ 
                top: "-2000px"
            }, 1000 );

                var targetPage = $(this).attr('href');
                targetPage += " #content";

            setTimeout(function() {
                $('#content-wrap').load(targetPage, function() {
                    $('#content-wrap').animate({ 
                        top: "0px"
                    }, 1000 );
                });
            });
            $(this).addClass('active'); 
            nav.preventDefault();
        });
    </script>
<!--/Navigation-->