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重新加载了包含.home-roll-box元素的DOM部分，您会发现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-->

使用`load（）`重新加载页面后，使用`hover（）`绑定的事件不会触发

2 个答案: