除非我刷新,否则 jQuery Mobile 中的 JavaScript 无法正常工作

标签 javascript jquery ajax jquery-mobile

我有一个内置 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 放入 <head>内容。当 jQuery Mobile 将其他页面加载到 DOM 中时,它只加载 <div>data-role="page"属性。其他一切,包括 <head> , 将被丢弃。

这是因为当前加载的页面有一个 <head>已经。没有必要加载其他页面 <head>内容。这更进一步。如果您在第二个 HTML 文件中有多个页面,则只会加载第一个页面。

我不会在这里尝试发明温水,所以这里是我讨论这个问题的其他 2 个答案的链接。那里可以找到几种解决方案:

  1. Why I have to put all the script to index.html in jquery mobile (或在 this blog article 中)

  2. Link fails to work unless refreshing

那里有足够的信息让您知道该怎么做。

这个问题的基本解决方案是:

  1. 将所有 JavaScript 放入第一个 HTML/ASP 文件
  2. 将您的 JavaScript 移动到 <body> ;更准确地说,将其移动到 <div> 中与 data-role="page" .正如我已经指出的,这是要加载的页面的唯一部分。
  3. 使用rel="external"在页面之间切换时,因为它会触发整个页面刷新。基本上,您的 jQuery Mobile 页面将充当普通的 Web 应用程序。

作为弓箭手 pointed out ,您应该使用页面事件来初始化您的代码。但是让我告诉你更多关于这个问题的信息。与经典的普通网页不同,在使用 jQuery Mobile 时,文档就绪通常会在页面完全加载/在 DOM 中增强之前触发。

这就是创建页面事件的原因。其中有几个,但如果您希望您的代码只执行一次(例如在文档准备就绪的情况下),您应该使用 pageinit 事件。在任何其他情况下使用 pagebeforeshowpageshow .

如果您想了解有关页面事件的更多信息以及为什么应该使用它们而不是准备好文档,请查看此 article在我的个人博客上。或者找here .

关于除非我刷新,否则 jQuery Mobile 中的 JavaScript 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17405013/

相关文章:

javascript - html规范

javascript - AJAX 成功重定向但给出 [对象 : object]

javascript - 如何获取 anchor 标记的子值?

javascript - jquery 在 <div> 图形区域内设置鼠标位置

javascript - 鼠标悬停时显示图像名称..使用 jquery 代码

jquery - $.ajax() 与 $.get() 和 $.load() 的区别

javascript - 在 JavaScript 中从 AJAX 返回值创建变量

javascript - 通过函数了解引用传递与值传递

javascript - 在 jQuery 函数调用中附加 id?

javascript - JavaScript 函数可以检查它是否在 Web Worker 线程上运行吗?