События, привязанные с помощью `hover ()`, не запускаются после перезагрузки страницы с помощью `load ()`

Question

Это два сценария, которые у меня есть: один - это сценарий навигации для эффекта AJAXing, а другой - для эффекта наведения.

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

После выполнения кода, который изменяет навигацию, другой код(обработчики событий, привязанные к изображениям полос с использованием hover()), не запускаются.

Есть мысли?

Answer 1

Если ваш load повторно загружает ту часть вашего DOM, которая содержит ваши элементы .home-roll-box, вы обнаружите, что новые элементы, вставленные вашим вызовом load, не будут иметь событияобработчики связаны с ними.

hover использует bind за кадром;который связывает обработчики только с элементами, которые в данный момент находятся в DOM.Будущие элементы не будут иметь связанные с ними обработчики.Вместо этого используйте live ;который связывает обработчики со всеми текущими и будущими элементами, которые соответствуют селектору (вы также должны взглянуть на делегат , чтобы завершить набор способов связать события-обработчики в 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

Спасибо @Matt за ответ, но в его коде была очень небольшая ошибка.

Полностью функционирует со следующим:

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