更改 jquery 版本会破坏锚点

Question

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

  <!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>

Answer 1

锚点 link 由于 jquery 移动而中断。 jQuery 移动设备具有将所有 link 更改为 ajax 呼叫的功能。您使用 jquery 手机的目的是什么？如果您仅将它用于特定功能而不是加载整个构建加载您想要使用的功能 http://jquerymobile.com/download-builder/

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

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

更改 jquery 版本会破坏锚点

Changing jquery version breaks anchors

html

jquery

jquery-mobile

twitter-bootstrap