使用“load()”重新加载页面后，使用“hover()”绑定的事件不会触发

Question

我有两个脚本：一个是用于 AJAX 效果的导航脚本，一个是用于悬停效果的脚本。

<!--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 中包含 < 的部分code>.home-roll-box 元素，您会发现通过 load 调用插入的新元素不会将事件处理程序绑定到它们。

hover 在幕后使用 bind ；它仅将处理程序绑定到 DOM 中当前的元素。未来的元素将不会将这些处理程序绑定到它们。使用 live 代替；它将处理程序绑定到与选择器匹配的所有当前和未来元素（您还应该查看 delegate，完成在 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-->