ajax - Chrome中的jquery标签需要2次点击

Question

此代码在 Firefox 和 IE 中运行良好。在 Chrome 中，您需要单击每个链接两次，然后页面加载两次。http://www.crowdfundcenter.com/ajaxpage.php有一个示例，代码如下：

<script type="text/javascript">

$(document).ready(function () { <!-- Begin document ready function -->

    $.history.init(pageload);   

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {    <!-- Begin click function -->

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');

        return false;

    }); <!-- End click function -->


}); <!-- End document ready function -->


function pageload(hash) {   <!-- Begin pageload hash -->
    if (hash) getPage();    
    }   <!-- End pageload hash -->


function getPage() {    <!-- Begin getPage function -->
    var loading = $("#loading");
    var data1 = document.location.hash;
    showLoading();
    switch(data1){
        case "#home":
            $('#content').slideUp();
            $('#content').load('xhome.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#business":
            $('#content').slideUp();
            $('#content').load('xbusiness.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#aboutus":
            $('#content').slideUp();
            $('#content').load('xaboutus.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#hidpage":
            $('#content').slideUp();
            $('#content').load('xhidpage.html', hideLoading);
            $('#content').slideDown();
            break;
        default:
            $('.loading').hide();
            break;
    }

function showLoading(){
    loading
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"});  
        }

function hideLoading(){
    loading.fadeTo(1000, 0);
    };

};      <!-- End getPage function -->

</script>


<div id="wrapper">  <!-- Begin wrapper -->

<div id="header">
    <ul id="menu">
        <li><a href="#home" rel="ajax">Home</a></li> 
        <li><a href="#business" rel="ajax">Business</a></li> 
        <li><a href="#aboutus" rel="ajax">About Us</a></li>
    </ul>
</div>

    <div style="clear: both;"></div>

    <div style="display: block; float: left; height: 24px;">
    <div id="loading">
    <img src="img/loading99small.gif" alt="Loading..." />
    </div>
    </div>


    <div style="clear: both;"></div>


    <div id="content">  <!-- Begin content -->
        <!-- Ajax Content -->

<div style="display: block; width: auto; margin: auto;">

<div style="display: block; width: auto; margin: 0px 0px 0px 0px; color: #CCCCCC; font-size: 12px;">
    <h2>Home Page</h2>
    This is the home page generated by code on this page.
</div>
    </div>


</div>  <!-- End content -->


<div style="display: block; float: left; clear: both;"></div>


<div style="display: block; width: auto; margin: auto;">  <!-- Begin footer -->

<div id="footer" style="display: block; margin: 40px 0px 40px 0px; color: #808080; font-size: 16px; font-weight: bold;">
    This is the footer for the page.
    </div>

    </div>  <!-- End footer -->

</div>  <!-- End wrapper -->

在 Firefox 和 IE 中一切正常。问题是 Chrome 并且不知道问题是什么，非常感谢任何帮助。

Answer 1

问题都是你的。

您在两者中都发出页面加载

• $('a[rel=ajax]').click()， 和
• $.history.init().

因此，代码实际上按预期工作。