除非我刷新，否则 jQuery mobile 中的 JavaScript 不起作用
Posted
技术标签:
【中文标题】除非我刷新，否则 jQuery mobile 中的 JavaScript 不起作用【英文标题】：JavaScript in jQuery mobile not working unless I refresh 【发布时间】：2013-06-28 14:32:54 【问题描述】：我有一个带有 javascript 的 jQuery 移动页面。问题是除非刷新页面，否则 JavaScript 不起作用。这是我的代码：
jQuery(function($)
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
);
【问题讨论】：
请描述“不起作用”。另外，这在哪里使用 jQuery mobile？ 不要在 jQuery Mobile 中使用 .ready / $(function($)。
@Omar - 没有。页面加载了 ajax 调用（默认情况下 - 可以关闭），因此只有 1 次调用 doc.ready。
【参考方案1】：
要理解这个问题，您需要了解 jQuery Mobile 的工作原理。
您的第一个问题是您尝试初始化 JavaScript 的地方。从您以前的答案中，我可以看到您正在使用多个 html/ASP 页面，并且您的所有 javascript 都是从页面<head> 初始化的。这是主要问题。只有第一个 HTML 文件应该将 JavaScript 放入 <head> 内容中。当 jQuery Mobile 将其他页面加载到 DOM 中时，它只加载带有 data-role="page" 属性的 <div>。其他所有内容，包括<head>，都将被丢弃。
这是因为当前加载的页面已经有一个<head>。加载其他页面<head> 内容毫无意义。这更进一步。如果第二个 HTML 文件中有多个页面，则只会加载第一个。
我不会尝试在这里发明温水，所以这里是我讨论这个问题的其他 2 个答案的链接。在那里可以找到几种解决方案：
Why I have to put all the script to index.html in jquery mobile（或this blog article）
Link fails to work unless refreshing
那里有足够多的信息让您知道该怎么做。
这个问题的基本解决方案是：
-
将所有 JavaScript 放入第一个 HTML/ASP 文件中
将您的 JavaScript 移动到
<body>；更准确地说，将其移动到带有data-role="page" 的<div> 中。正如我已经指出的，这是页面中唯一要加载的部分。
在页面之间切换时使用rel="external"，因为它会触发整页刷新。基本上，您的 jQuery mobile 页面将充当普通的 Web 应用程序。
作为 Archer pointed out，您应该使用页面事件来初始化您的代码。但是让我告诉你更多关于这个问题的信息。与经典的普通网页不同，使用 jQuery Mobile 时，文档就绪通常会在页面在 DOM 内完全加载/增强之前触发。
这就是创建页面事件的原因。其中有几个，但如果您希望您的代码只执行一次（例如在文档准备好的情况下），您应该使用pageinit 事件。在任何其他情况下，请使用 pagebeforeshow 或 pageshow。
如果您想了解有关页面事件的更多信息以及为什么应该使用它们而不是准备好文档，请查看我个人博客上的 article。或者找到here。
【讨论】：
【参考方案2】：你的问题并没有完全充满指针和提示，所以我会选择当我看到它时立即想到的东西。
使用 jQuery Mobile 更改页面时不会触发文档就绪，这是由于“hijax”，他们“ajaxifying”所有链接的方法。试试这个吧……
$(document).on("pageshow", function()
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
);
【讨论】：
pageinit 可能是一个更好的绑定事件，至少在用户体验方面是这样。
是的，好点。我想这取决于他想做什么。在尝试找到与document.ready 等效的对象时，我发现pageshow 更适合我的需求，但我同意他应该两者都尝试。
无论哪种情况，您的答案的要点似乎都是正确的； OP 需要挂钩到 jQm 事件系统。
使用此代码 :$(document).on("pageshow", function() var url = window.location.search.substring(1); $('#mydiv').load ('real_news.asp?' + url); 刷新页面时甚至无法正常工作
如果您刚刚发布的代码是复制和粘贴代码，那么您需要检查您是否使用); 正确终止了它，因为您没有在上面完成。【参考方案3】：
像这样尝试pageinit
$(document).delegate("body", "pageinit", function() // Use body or page wrapper id / class
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
);
【讨论】：
代码已更新，使用pageinit 和 body 或页面包装器 id / class
我使用了这段代码，但除非我刷新它，否则它仍然无法加载。它在浏览器上运行良好，但在 chrome 的波纹模拟器和 android 模拟器中却不行。
如果您将上述代码包装在$(document).ready(function() 中，则将其从那里删除并添加到文件末尾。在 jQuery Mobile 中$(document).ready(function() 将在页面刷新或首次页面加载时起作用，所以不要使用$(document).ready(function() ，使用(document).delegate("body", "pageinit", function()
我用过 this($(document).delegate("body", "pageinit", function() // 使用 body 或 page wrapper id / class var url = window.location. search.substring(1); $('#mydiv').load('real_news.asp?' + url); );) 在细节显示之前我仍然需要刷新。除非你刷新，否则模拟器不能只接收传递的参数。
这里是传递url参数的页面代码：似乎没有什么对我有用。尝试了许多不同的修复程序，但我让网站太乱了，即使某些 javascript 文件的位置也无法使网站正常工作。说够了，这就是我想出的。 // 把它写在所有 javascripts 顶部的 head 中
<script type="text/javascript">
$(document).ready(function()
// stops ajax load thereby refreshing page
$("a,button,form").attr('data-ajax', 'false');
// encourages ajax load, hinders refresh page (in case if you want popup or dialogs to work.)
$("a[data-rel],a[data-dialog],a[data-transition]").attr('data-ajax', 'true');
);
</script>
【讨论】：
以上是关于除非我刷新，否则 jQuery mobile 中的 JavaScript 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jQuery Mobile 中刷新单选按钮的样式和布局？
jquery mobile，结合jquery mobile“页面”和内部页面
SmartEdit：除非刷新页面，否则嵌套 CMS 组件中的更改不会反映
除非我先刷新，否则 React 应用程序中的 Firestore 文档字段更新会给出 TypeError