jQuery：脚本突然停止工作答案

【问题标题】：jQuery: Script suddenly stops workingjQuery：脚本突然停止工作
【发布时间】：2014-10-02 09:05:47
【问题描述】：

所以，我查看了有关 jQuery 和脚本停止工作的问题。但似乎，它们不适合我的问题：

当我在我的 Android 智能手机上切换视图时，scroll.js 停止工作。链接甚至不会“跳转”到它们的目的地......

这是 index.html：

    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />

        <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="./js/lightbox.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>

        <link rel="stylesheet" href="./css/lightbox.css"/>

        <link rel="stylesheet" href="./css/computer.css" media="screen and (min-width:981px)"></link>

        <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
        <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
        <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-width:720px)">
        <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->

        <script type="text/javascript">
            var next_move = "expand";
            $(document).ready(function (){
            if (window.matchMedia('(max-width: 720px)').matches) {
                    $("#icon-menu").on('click',function(){
                        if (next_move == "expand"){
                            $("#navigation").animate({left: '50%'});
                            $("body").animate({left: '50%'});
                            next_move = "shrink";
                    } else {
                        $("#navigation").animate({left: '0%'});
                        $("body").animate({left: '0%'});
                        next_move = "expand";
                    }
                    });
            }
            else{

            }
            });
        </script>

    </head>

还有scroll.js：

 $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });

Chrome （我猜是所有 webkit 浏览器）和 android 浏览器都发生了什么事。当我用 Firefox 打开它时，滚动有效，菜单扩展无效。我尝试了 .noConflict()，但它确实做到了，链接跳转到目的地并且菜单不再扩展。

查看：click me

请忽略设备宽度等内容。还没写完，我要测试一下。

所以真正的问题是：我究竟做错了什么？如果有冲突，我在哪里可以找到并纠正它们？

要重现此问题，只需将浏览器调整为智能手机大小并刷新或改用智能手机即可。否则，该站点将显示为 pc，一切正常。

编辑：在智能手机查看的电脑上，一切都适用于 Firefox，但在实际的智能手机上，菜单不会展开......

谢谢！

【问题讨论】：

并不是说它会有所作为，但请注意您有两个文档就绪处理程序。 $(function(){}); 只是 $(document).ready(function{}); 的快捷方式 :)
尝试使用 on('click', function() {... 绑定事件...并尝试重新绑定它 $(window).on('orientationchange' 和 $(window).on('调整大小'...
那么，在这种情况下是 $("#icon-menu").on('click', function(){} ？抱歉，这东西有点新……
如果您遇到范围问题，您可以使用 jQuery(function($){ YOUR CODE }); 代替它，它既可以处理 DOM，也可以提供本地范围的 $
另外，设置setTimeout代码执行的适当方式是setTimeout(function() { $('#loading').hide(); }, 1500);

标签： javascript jquery html

【解决方案1】：

这个问题没有完全回答。

一种解决方案是忽略移动设备的平滑滚动。所以，atm 的代码是这样的：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/lightbox.min.js"></script>

    <link rel="stylesheet" href="./css/lightbox.css"/>

    <link rel="stylesheet" href="./css/computer.css" media="screen and (min-device-width:981px)"></link>

    <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
    <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
    <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-device-width:720px)">
    <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->

    <script type="text/javascript">
        var next_move = "expand";
        $(document).ready(function (){
        if (window.matchMedia('(max-device-width: 720px)').matches) {
                $("#icon-menu").on('click',function(){
                    if (next_move == "expand"){
                        $("#navigation").animate({left: '50%'});
                        $("body").animate({left: '50%'});
                        next_move = "shrink";
                } else {
                    $("#navigation").animate({left: '0%'});
                    $("body").animate({left: '0%'});
                    next_move = "expand";
                }
                });
        }
        else{
            $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
        }
        });
    </script>

所以链接和菜单问题已经解决了，但是想要的手机平滑滚动效果也仍然不起作用。

也许有人有线索。

要查看移动视图，需要一个宽度（不是分辨率！）为 720 像素的设备。

【讨论】：