0

我正在编写一个网站，该网站将使用 jquery 在单个页面上加载所有内容。一切功能本身都可以正常工作，但是当我开始导航时，一个接一个地调用加载功能，每个实例都会慢一点，直到页面完全崩溃。

这是 ajax 的结构性问题（我认为不是，但谁知道？）还是我做错了什么？

我有时在加载函数中有回调函数，但它们也可以正常工作。

编辑

好的，我只是想知道这是否很常见，但显然不是，所以我将向您展示一些代码：

// click and load part
$("#about").click(function(){   
    $("#c1").load('<?php echo get_site_url(); ?>/?page_id=5', 
        layout();
    });
});

//callback function, basically some css injection
function layout() {
        windowHeight = $(window).height();
        $(".column-content").css('height',windowHeight-(containerTop+20)+'px');
        $(".column-content_mode").css('height',windowHeight-(containerTop+60)+'px');
        $(".container-column").css('height',windowHeight-(containerTop+20)+'px');
}

一切都包含在一个非常$(document).ready({ //all the js }); 感谢您的快速干预中。

4

2 回答 2

1

在不查看您的代码的情况下，我可以告诉您此问题的最常见原因：

$(function() {
    $('#target').load('/your/url', function() {
        $('.someclass').click(function() {
            // Click handler for the new elements you just added
        })
    });
});

这里的问题是，您不仅要向刚刚加载的新元素添加处理程序，而且还要向页面上的所有现有元素添加处理程序。它成倍增长！

为了解决这个问题，使用该on方法添加一次处理程序，它会自动为新元素添加它们。

$(function() {
    $('#target').on('click','.someclass',function() {
        // Click handler for the new elements you will add in the future
    });
    $('#target').load('/your/url', function() {
        // Nothing to do here now
    });
});

编辑

$("#about").click(function(){   
    $("#c1").load('<?php echo get_site_url(); ?>/?page_id=5', 
        layout();
    });
});

的第二个参数load应该是一个函数引用。摆脱()那里，这样你就不会立即调用该函数。您只想传递名称，而不是执行它。此外，你}的无与伦比。在这里仔细检查。

于 2013-09-20T16:08:29.697 回答
0

好吧，所以。原来，失败是js递归加载自己造成的。我这样做是错误的，因为我希望它在每次发生 ajax 事件时刷新。

使用$('#id').live('click', function(){...});而不是$('#id').click(function(){...});允许我正确刷新 js，并且没有任何延迟。

感谢大家的帮助！

于 2013-10-22T14:54:14.130 回答