除非我刷新，否则 jQuery Mobile 中的 JavaScript 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17405013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript in jQuery mobile not working unless I refresh
提问by user2522201
I'm having a jQuery mobile page with JavaScript inside. The problem is the JavaScript doesn't work unless the page is refreshed. Here is my code:
我有一个带有 JavaScript 的 jQuery 移动页面。问题是除非刷新页面，否则 JavaScript 无法工作。这是我的代码：
jQuery(function($) {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
回答by Gajotres
To understand this problem you need to understand how jQuery Mobile works.
要理解这个问题，您需要了解 jQuery Mobile 的工作原理。
Your first problem is point where you are trying to initialize JavaScript. From your previous answers I can see you are using several HTML/ASP pages and all of your javascript is initialized form the page <head>. This is the main problem. Only the first HTML file should have JavaScript placed into the <head>content. When jQuery Mobile loads other pages into the DOM it loads only the <div>with a data-role="page"attribute. Everything else, including <head>, will be discarded.
您的第一个问题是您尝试初始化 JavaScript 的位置。从您之前的答案中，我可以看到您正在使用多个 HTML/ASP 页面，并且您的所有 javascript 都是从页面初始化的<head>。这是主要问题。只有第一个 HTML 文件应该将 JavaScript 放入<head>内容中。当 jQuery Mobile 将其他页面加载到 DOM 时，它只加载<div>具有data-role="page"属性的 。其他所有内容，包括<head>，都将被丢弃。
This is because currently loaded page has a <head>already. No point in loading another pages <head>content. This goes even further. If you have several pages in a second HTML file, only the first one is going to be loaded.
这是因为当前加载的页面已经有一个<head>。加载另一个页面的<head>内容毫无意义。这更进一步。如果第二个 HTML 文件中有多个页面，则只会加载第一个页面。
I will not try to invent warm water here so here are links to my other 2 answers discussing this problem. Several solutions can be found there:
我不会尝试在这里发明温水，所以这里是我讨论这个问题的其他 2 个答案的链接。可以在那里找到几种解决方案：
There's more then enough information there to give you an idea what to do.
那里有更多的信息，可以让您知道该怎么做。
The basic solutions to this problem are:
这个问题的基本解决方案是：
- Put all of your JavaScript into a first HTML/ASP file
- Move your JavaScript into
<body>; to be more precise, move it into a<div>withdata-role="page". As I already pointed out, this is the only part of a page that is going to be loaded. - Use
rel="external"when switching between pages because it will trigger a full page refresh. Basically, you jQuery mobile that the page will act as a normal web application.
- 将所有 JavaScript 放入第一个 HTML/ASP 文件中
- 将你的 JavaScript 移动到
<body>; 更准确地说，将其移动到<div>with 中data-role="page"。正如我已经指出的，这是将要加载的页面的唯一部分。 rel="external"在页面之间切换时使用，因为它会触发整页刷新。基本上，您的 jQuery mobile 页面将充当普通的 Web 应用程序。
As Archer pointed out, you should use page events to initialize your code. But let me tell you more about this problem. Unlike classic normal web pages, when working with jQuery Mobile, document ready will usually trigger before page is fully loaded/enhanced inside the DOM.
正如 Archer指出的那样，您应该使用页面事件来初始化您的代码。但是让我告诉你更多关于这个问题的信息。与经典的普通网页不同，使用 jQuery Mobile 时，文档就绪通常会在页面完全加载/增强 DOM 之前触发。
That is why page events were created. There are several of them, but if you want your code to execute only once (like in case of document ready) you should use the pageinitevent. In any other case use pagebeforeshowor pageshow.
这就是创建页面事件的原因。其中有几个，但是如果您希望代码只执行一次（例如文档准备就绪的情况），您应该使用该pageinit事件。在任何其他情况下使用pagebeforeshow或pageshow。
If you want to find out more about page events and why they should be used instead of document ready take a look at this articleon my personal blog. Or find it here.
如果您想了解有关页面事件的更多信息以及为什么应该使用它们而不是文档就绪，请查看我个人博客上的这篇文章。或者在这里找到它。
回答by Reinstate Monica Cellio
Your question isn't exactly overflowing with pointers and tips, so I'm going with the thing that immediately sprung to mind when I saw it.
你的问题并没有完全充满指针和提示，所以我会继续我看到它时立即想到的事情。
Document ready does not fire on page change with jQuery Mobile, due to "hijax", their method of "ajaxifying" all the links. Try this instead...
由于“hijax”，他们的“ajaxifying”所有链接的方法，文档就绪不会在使用 jQuery Mobile 的页面更改时触发。试试这个...
$(document).on("pageshow", function() {
var url = window.location.search.substring(1);
$('#mydiv').load('real_news.asp?' + url);
});
回答by Manoj Yadav
Try pageinitlike this
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);
});
回答by MAtt
seems like nothing ever worked for me. Tried many different fixes, but i made the site too messy, that even position of certain javascript files wouldn't make the site work. Enough talk, here is what i came up with. // write it in head at top of all javascripts
似乎没有什么对我有用。尝试了许多不同的修复程序，但我使站点变得过于混乱，即使某些 javascript 文件的位置也不会使站点正常工作。废话不多说，这就是我想出来的。// 把它写在所有 javascripts 的顶部
<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>
