除非我刷新，否则 jQuery Mobile 中的 JavaScript 不起作用 [英] JavaScript in jQuery mobile not working unless I refresh
问题描述
我有一个带有 JavaScript 的 jQuery 移动页面.问题是除非刷新页面，否则 JavaScript 无法工作.这是我的代码:
jQuery(function($) {var url = window.location.search.substring(1);$('#mydiv').load('real_news.asp?' + url);});要理解这个问题，您需要了解 jQuery Mobile 的工作原理.
您的第一个问题是您尝试初始化 JavaScript 的位置.从您之前的答案中，我可以看到您正在使用多个 HTML/ASP 页面，并且您的所有 javascript 都是从页面 <head> 初始化的.这是主要问题.只有第一个 HTML 文件应该将 JavaScript 放入 内容中.当 jQuery Mobile 将其他页面加载到 DOM 时，它只加载带有 data-role="page" 属性的
这是因为当前加载的页面已经有一个 .加载另一个页面 内容毫无意义.这更进一步.如果您在第二个 HTML 文件中有多个页面，则只会加载第一个页面.
我不会在这里尝试发明温水，所以这里是我讨论这个问题的其他 2 个答案的链接.可以在那里找到几种解决方案:
那里有足够多的信息让您知道该怎么做.
这个问题的基本解决方案是:
- 将所有 JavaScript 放入第一个 HTML/ASP 文件
- 将你的 JavaScript 移到
;更准确地说，将其移动到带有data-role="page"的中.正如我已经指出的，这是将要加载的页面的唯一部分.- 在页面之间切换时使用
rel="external"因为它会触发整页刷新.基本上，您的 jQuery mobile 页面将充当普通的 Web 应用程序.正如 Archer 指出，您应该使用页面事件来初始化您的代码.但是让我告诉你更多关于这个问题的信息.与经典的普通网页不同，使用 jQuery Mobile 时，文档就绪通常会在页面完全加载/增强 DOM 之前触发.
这就是创建页面事件的原因.有几个，但如果你想让你的代码只执行一次(比如在文档准备好的情况下)你应该使用
pageinit事件.在任何其他情况下，请使用pagebeforeshow或pageshow.如果您想了解有关页面事件的更多信息以及为什么应该使用它们而不是文档就绪，请查看此 文章 在我的个人博客上.或者在此处找到它.
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:
jQuery(function($) { var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); });解决方案To understand this problem you need to understand how jQuery Mobile works.
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 adata-role="page"attribute. Everything else, including<head>, will be discarded.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.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:
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.
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.
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 usepagebeforeshoworpageshow.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 article on my personal blog. Or find it here.
这篇关于除非我刷新，否则 jQuery Mobile 中的 JavaScript 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文 - 在页面之间切换时使用
