Question

我有一个导航，我将页面加载到一个名为target的div中。它运作良好，但有一点点烦人的错误。

当我按导航链接时，它会隐藏当前内容并加载新内容，但随后会隐藏新内容并再次显示。在firebug中，我看到该脚本对它正在尝试加载的页面发出两个请求。但我不明白为什么它加载它两次？

继承我的jquery：

$(".nav").click(function(e){
        e.preventDefault();

        $(".footer").hide(0);       
        $('#target').html('<div class="content">Loding...</div>');

        $.get(this.href, function(data) {

            $("#target").hide(0, function(){
                $("#sub_menu").fadeOut("fast");     
                $(".footer").show(0);
                $(this).html(data).show(0);
            });

        }); 


});

祝你好运！

Answer 1

我的猜测是你有2个元素"nav"。

尝试alert($(".nav").length);检查你得到了多少元素。

Answer 2

您的事件可能会从实际事件目标中冒出来，并且处理程序绑定到祖先，在这种情况下它会触发两次。

您可以通过调用事件对象的stopPropagation方法来阻止这种情况发生：

$(".nav").click(function(e) {
    e.stopPropagation();
    //etc...
});

Answer 3

有几个原因可能会发生这种情况，但您可以采取一些不同的措施来防止这种情况发生。首先，确保在通过AJAX加载内容时不重新应用处理程序。通过AJAX获取的内容中的任何脚本应仅适用于正在加载的内容。其次，如果您怀疑可能正在重新应用处理程序或需要替换现有处理程序，请在应用新事件之前删除该事件的处理程序。第三，当您知道被调用的处理程序应该是唯一一个在元素上停止传播的处理程序并且在适当时阻止默认操作。最简单的方法是从处理程序返回false。

 $('.nav').unbind('click').click( function() {
     ...
     return false;
 });

Answer 4

这是我对OP的评论：

确保点击代码仅加载 ONCE 。

jQuery加载页面两次，但为什么？

4 个答案: