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

use*_*201 6 javascript ajax jquery jquery-mobile

我正在使用带有JavaScript的jQuery移动页面.问题是除非刷新页面,否则JavaScript不起作用.这是我的代码:

jQuery(function($) {
    var url = window.location.search.substring(1);
    $('#mydiv').load('real_news.asp?' + url);
});
Run Code Online (Sandbox Code Playgroud)

Gaj*_*res 11

要理解这个问题,您需要了解jQuery Mobile的工作原理.

您的第一个问题是您尝试初始化JavaScript的问题.根据您之前的答案,我可以看到您正在使用多个HTML/ASP页面,并且您的所有javascript都在页面中初始化<head>.这是主要问题.只有第一个HTML文件才能将JavaScript放入<head>内容中.当jQuery Mobile将其他页面加载到DOM中时,它只加载<div>带有data-role="page"属性的页面.包括在内的所有其他内容都<head>将被丢弃.

这是因为当前加载的页面已经<head>有了.加载其他页面<head>内容没有意义.这甚至更进一步.如果第二个HTML文件中有多个页面,则只会加载第一个页面.

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

  1. 为什么我必须将所有脚本放到jquery mobile中的index.html(或在此博客文章中)

  2. 除非刷新,否则链接无法工作

那里有足够的信息可以让你知道该怎么做.

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

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

正如Archer 指出的那样,您应该使用页面事件来初始化您的代码.但是,让我告诉你更多关于这个问题的信息.与传统的普通网页不同,使用jQuery Mobile时,文档就绪通常会在页面在DOM内完全加载/增强之前触发.

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

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


Arc*_*her 3

你的问题并没有充满指导和技巧,所以我将讨论我看到它时立即浮现在脑海中的事情。

由于“hijax”(他们“ajaxifying”所有链接的方法),文档就绪不会在 jQuery Mobile 的页面更改时触发。试试这个吧...

$(document).on("pageshow", function() {
    var url = window.location.search.substring(1);
    $('#mydiv').load('real_news.asp?' + url);
});
Run Code Online (Sandbox Code Playgroud)

  • 至少在用户体验方面,“pageinit”可能是一个更好的绑定事件。 (2认同)