jQuery动态加载内容

时间:2011-01-23 23:07:46

标签: jquery ajax dynamic-content

我遇到动态加载内容的问题。我有菜单,在div点击隐藏后,他们正在加载新的内容,他正在移动..它正常工作,但在新的内容我有子菜单,它想对菜单使用相同的效果,但是问题的存在和链接导致立即通过

也许它更容易理解:):我有CONTNET DIV,这是动态加载如果我点击MENU中的链接...新内容正确加载。在新的内容我有子菜单但如果我点击链接所有网站都重新加载...如果我只想加载'内容div'我该怎么办..

代码有什么问题?

 $(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('.nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

我试图使用你的建议,但它没有效果..

我做了示例页面..

http://zaciszepuck.pl/site/

你可以看到,如果你点击菜单,一切都没问题,但如果要点击'欢迎内容'中的子菜单,所有网站都会重新加载,但是如果你再次点击,只会加载Content Div ..

有人有想法吗?

2 个答案:

答案 0 :(得分:0)

你的母语是什么?我认为回答它会更容易。

是不是?您在主菜单中单击任何项​​目并使用AJAX加载到页面新菜单,但新菜单中的项目不会调用AJAX请求?

如果是这样,您需要根据需要将AJAX函数调用应用于新菜单,其项目或加载孔的内容。

$(".nav li a").click(function funcName() {
    ...
    $("#content").load(toLoad, function (){
        showNewContent();
        $(".nav li a").click(funcName);/*or other submenu selector*/
    });
    ...
});

我认为你的代码太复杂了,需要一些改进。

答案 1 :(得分:0)

根据我对您的查询的理解,这可能会这样做。

$('.nav li a, #content a').live('click', function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });