javascript - jquery 不能在手机上工作

Question

我有一个网站菜单，它使用少量 jQuery 将 HTML 页面的特定部分加载到当前页面，ID 为“guts”。我希望菜单在访问期间保持不变，而“胆量”就是所有变化。 URL 也随着函数的变化而改变。

我让它在大多数桌面浏览器上都能正常工作，但在移动设备上却不能。内容淡入淡出，因此脚本被部分执行，但没有引入正确的内容，URL 保持不变。

我是新手，我认为这是某种语法错误。非常感谢任何帮助。谢谢。

Working Page :

我的代码:

$(document).ready(function() {

    var newHash      = "",
        $mainContent = $("#content-wrap"),
        $el;



    $("#menu a").click(function(event) {
        event.preventDefault();
        var _link = this.href;
        $mainContent
                .fadeOut(1000, function() {
                    $mainContent.hide().load(_link + " #guts", function() {
                        $mainContent.fadeIn(1000);
                        window.history.pushState(null, null, _link);
                        $(window).trigger("pathchange");
                        });
                    });
        return false;

    });

});

Answer 1

我会以完全不同的方式做到这一点:

$(document).ready(function() {

var newHash      = "",
    $mainContent = $("#content-wrap"),
    $el;



$("#menu a").on("click tap", function(event) {

    var _link = $(this).attr('href');


    $mainContent.fadeOut(1000);

    // Sends GET request to _link + "#guts" with empty arguments({})
    // And after it does the stuff with htmlData =(response) in callback func.        
    $.get(_link + "#guts", {}, function(htmlData) {

           // Waits for fadeout function
           while($mainContent.attr('display') != 'none') {}

           // Fills the content of $mainContent div with response data
           $mainContent.html(htmlData);

           // Does your stuff           
           $mainContent.fadeIn(1000);
           window.history.pushState(null, null, _link);
           $(window).trigger("pathchange");
    } 
}

希望它会起作用:)祝你好运。