Javascript 不会加载包含 jQuery mobile 的链接

Question

编辑:在尝试寻找解决方案时，主题发生了一些变化 - TL;DR:请参阅答案。对于所有对该主题的发展感兴趣的人，请继续;-)

标题可能会令人困惑，但我不知道如何用更好的词语来表达 - 假设我有一个简单的 View 函数:

@app.route('/chart')
def chart():

return render_template('chart.html')

如果我现在通过“http://localhost:5000/start”在浏览器中直接打开此 View ，它工作得很好 - javascript 内容按预期工作(绘制图表，使用 slider 调用不同的 View 等)。

但是，使用其他模板中的链接不起作用，例如我有一个 Root View :

@app.route('/')
def index():
    return render_template('index.html')

在此index.html内部有一个指向“/chart”的链接:

 <a href="{{ url_for('chart') }}">Chart</a>

现在，按下该链接，它会加载我的模板，我可以看到基本的 html 内容，但 javascript 代码根本不加载/启动(浏览器收到的源代码也是正确的)。在这两种情况下，服务器都会收到相同的命令:

127.0.0.1 - - [13/May/2015 10:48:18] "GET /chart HTTP/1.1" 200 -

但只有当我直接在浏览器中打开它时，它才会按预期工作。

我的链接/重定向有问题吗？

编辑:我发现导致问题的一行:在我的 index.html 中，我正在加载 jQuery mobile:

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

删除这一行，一切都按预期工作 - 但当然我不想将其包括在内，为什么以及如何影响链接行为？

Answer 1

默认情况下，jQuery 使用 Ajax 来处理页面请求。这允许页面之间的平滑过渡(没有页面刷新的感觉)，但这也意味着只会加载所请求页面的主体 - 因此 header 中不包含任何 javascript 库。

因此，所有必要的 javascript 都必须包含在原始站点的 header 中，或者必须使用 data-ajax="false" 属性在没有 ajax 的情况下完成页面请求。这将进行真正的页面刷新，无需 ajax 转换。

欲了解更多信息，请阅读this .