Question

我正在构建一个基于ajax的导航，一切正常，除了一件事：

当我查看Firebug时，我可以看到每次点击都会调用ajax网站并加载两次。

这是剧本：

$(document).ready(function () {

    //Check if url hash value exists (for bookmark)
    $.history.init(pageload);   

    //highlight the selected link
    $('a[href=' + document.location.hash + ']').addClass('selected');

    //Seearch for link with REL set to ajax
    $('a[rel=ajax]').click(function () {

        //grab the full url
        var hash = this.href;

        //remove the # value
        hash = hash.replace(/^.*#/, '');

        //for back button
        $.history.load(hash);   

        //clear the selected class and add the class class to the selected link
        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');

        //hide the main and show the progress bar
        $('#main').hide();
        $('#loading').show();


        //run the ajax
        getPage();

        //cancel the anchor tag behaviour
        return false;
    }); 
});

//AJAX Navigation Helper function
function pageload(hash) {

    //if hash value exists, run the ajax
    if (hash) getPage();    
}

//AJAX Navigation Helper function   
function getPage() {

    //generate the parameter for the php script
    var data = 'page=' + encodeURIComponent(document.location.hash);

    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  

            //hide the progress bar
            $('#loading').hide();   

            //add the main retrieved from ajax and put it in the #main div
            $('#main').html(html);

            //display the body with fadeIn transition
            $('#main').fadeIn('slow');      

            //reload site scripts
            $.getScript("js/script.js"); 

        }       
    });

}

因此，每当我点击导航中的列表时，页面就会很好地加载到#main中，但它会发生两次（如Firebug中所示）。 Any1可能知道为什么？：）

我注意到当我通过url访问某个页面时它没有发生（比它只进行一次ajax调用），所以我猜问题就在click函数的某个地方。

P.S。我正在使用jquery历史插件，但我不认为问题存在，或者？

Answer 1

我猜测getPage被调用两次。将调试器语句放在函数的开头（调试器;）并打开firebug以查看它是否存在。如果它被调用两次，这是解决问题的一种方法：

//AJAX Navigation Helper function   
function getPage() {

    if(getPage.isLoaded != true) {

        //generate the parameter for the php script
        var data = 'page=' + encodeURIComponent(document.location.hash);

        $.ajax({
            url: "loader.php",  
            type: "GET",        
            data: data,     
            cache: false,
            success: function (html) {  

                //hide the progress bar
                $('#loading').hide();   

                //add the main retrieved from ajax and put it in the #main div
                $('#main').html(html);

                //display the body with fadeIn transition
                $('#main').fadeIn('slow');      

                //reload site scripts
                $.getScript("js/script.js"); 

            }       
        });

    }

    getPage.isLoaded = true;

}

Answer 2

我相信你的点击事件正在冒泡到锚点。

尝试：

    $('a[rel=ajax]').click(function (event) {

        //cancel the anchor tag behaviour
        event.preventDefault();

        //grab the full url
        var hash = this.href;

        //remove the # value
        hash = hash.replace(/^.*#/, '');

        //for back button
        $.history.load(hash);   

        //clear the selected class and add the class class to the selected link
        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');

        //hide the main and show the progress bar
        $('#main').hide();
        $('#loading').show();


        //run the ajax
        getPage();


    });

编辑：简单地返回false将不会取消jquery绑定事件。

编辑：@wildrot是对的

Answer 3

只是推测，但是......你通过AJAX加载的东西是否会再次包含相同的脚本？

Answer 4

添加

$('a[rel=ajax]').die('click').click(function (event) { -> will load once..

希望这有帮助

jquery + AJAX +双重调用

4 个答案: