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

【问题标题】：Javascript won't load on links with jQuery mobile included包含 jQuery mobile 的链接不会加载 Javascript
【发布时间】：2015-07-24 11:13:48
【问题描述】：

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

标题可能会让人困惑，但我不知道如何更好地表达 - 假设我有一个简单的视图函数：

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

return render_template('chart.html')

如果我现在通过“http://localhost:5000/start”在浏览器中直接打开这个视图，它工作得非常好 - javascript 的东西按预期工作（绘制图表，使用滑块调用不同的视图等）。

但是，使用来自其他模板的链接不起作用，例如我有一个根视图：

@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 移动：

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

删除这条线，一切都按预期工作 - 但我当然不想包含它，为什么以及如何影响链接行为？

【问题讨论】：

chart.html模板中的JS还是单独的文件？如果你打开浏览器的开发者工具，能看到 JS 代码吗？
混合，内部一些自定义代码，外部一些库。当我按下链接时，devTools 只显示一个接收chart.html als text/html 的get 方法，仅此而已。如果我直接在浏览器中打开 /chart，它会加载所有 javascript 文件/请求。但是，我在 index.html 中发现了破坏一切的单行：<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 我现在将编辑我的问题，我不知道为什么这行是负责任的。
我现在更进一步：出现问题是因为 jQuery mobile 不会正常对链接进行整页刷新，所以我必须在链接中添加 data-ajax="false"。它以这种方式工作，但如果它也可以在没有整页请求的情况下工作，那当然会很有趣。
恐怕我对jQuery mobile一无所知，所以我不确定我能提供多少帮助。很高兴你至少有所收获。
感谢您的帮助，我现在找到了问题的核心。

【解决方案1】：

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

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

更多信息请阅读this。

【讨论】：