weixin_33725272 2011-09-23 19:07 采纳率: 0%
浏览 28

jQuery + AJAX +双重通话

I am building an ajax based navigation and everything works fine, except one thing:

When i look in Firebug I can see that on each click the ajax site gets called and loaded twice.

This is the script:

$(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"); 

        }       
    });

}

So whenever I click on a list in my navigation, the page gets loaded just fine into #main, but it happens twice (as displayed in Firebug). Any1 maybe has an idea why? :)

I noticed that it doesnt happen when i access a certain page by url (than it only does one ajax call), so I guess the problem is somewhere in the click function.

p.s. i am using the jquery history plugin, but I dont think the problem is there, or?

  • 写回答

4条回答 默认 最新

  • weixin_33727510 2011-09-23 19:12
    关注

    I believe your click event is bubbling to the anchor.

    try:

        $('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();
    
    
        }); 
    

    Edit: simply returning false won't cancel a jquery bound event.

    Edit: @wildrot is right

    评论

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果