更改 jquery 版本会破坏锚点答案

【问题标题】：Changing jquery version breaks anchors更改 jquery 版本会破坏锚点
【发布时间】：2017-06-30 05:54:22
【问题描述】：

我刚刚开始学习烧瓶，所以我创建了一个带有弹出表单的非常简单的页面。我无法理解的是，当使用 jquery 1.7.0 及更高版本时，弹出表单有效，但链接回页面不同部分的锚点无效。如果我将 jquery 版本更改为 1.6.4 及以下版本，则锚链接有效，但弹出表单无效。这也是我第一次使用 jquery mobile，可能是我的问题的一部分。我在下面发布了我的代码。任何帮助表示赞赏。非常感谢！

  <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>   
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{{ url_for('static',filename='js/stripe-local.js') }}"></script>
    <link href="https://fonts.googleapis.com/css?family=Lora:700i|Titillium+Web" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-default navbar-fixed-top">
            <ul class="nav navbar-nav">
            <li class=><a href="#home">Home</a></li>    
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#pay">Pay</a></li>
            </ul>
    </nav>
    <div class="jumbotron" id="home">
        <div class="container-fluid">
            <h1>Design Something</h1>
        </div>
    </div>
    <div class="container-fluid" id="about">
        <div class="row">
            <h1 class="anchor">About</h1>
            <img src="{{ url_for('static', filename='img/img.jpg') }}" class="img-rounded center-block"></img>
            <div class="container">
            <p>blah blah blah blah blah</p>
            </div>
        </div>
    </div>
    <div class="container-fluid" id="contact">
        <div class="row">
            <h1 class="anchor">Contact Me</h1>  
            <p>email@address.com</p>    
        </div>
    </div>
    <div class="container-fluid" id="pay">
    <h1 class="anchor">Pay Now</h1>
    <a href="#popupPay" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">Pay Now</a>
        <div data-role="popup" id="popupPay" class="ui-content" style="min-width:250px;">       
            <form method="post" action="charge.py">
                <div>
                    <h3>Payment Form</h3>   
                    <label for="name" class="ui-hidden-accessible">Name:</label>
                    <input type="text" name="name" id="name" placeholder="name">
                    <input type="submit" data-inline="true" value="Pay $">
                    <div class="outcome">
                        <div class="error" role "alert"></div>
                        <div class="success">
                        Success! Your Stripe token is <span class="token"></span>   
                        </div>  
                    </div>  
                </div>  
            </form>
        </div>
    </div>
</body>
</html>

【问题讨论】：

对不起，您为什么要更改 jQuery 库？
只是想了解发生了什么问题以及原因。

标签： jquery html twitter-bootstrap jquery-mobile

【解决方案1】：

锚链接因 jquery mobile 而中断。 jQuery mobile 有一个功能，可以更改所有链接到 ajax 调用。您使用 jquery mobile 的目的是什么？如果您仅将它用于特定功能而不是加载整个构建仅加载您想要使用的功能http://jquerymobile.com/download-builder/

或者您可以通过添加以下代码来禁用它

$(document).bind("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
});

【讨论】：

太棒了！太感谢了！我正在使用 jQuery mobile 作为弹出表单。我还在学习 jQuery mobile，但是将锚点更改为 ajax 调用的目的是什么？
这是为了在移动设备上更快地加载网站，这样每次用户点击任何链接页面都不会完全重新加载。