5

我有一个带有 JavaScript 的 jQuery 移动页面。问题是除非刷新页面，否则 JavaScript 不起作用。这是我的代码：

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

4 回答 4

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>with 中data-role="page"。正如我已经指出的，这是要加载的页面的唯一部分。
  3. rel="external"在页面之间切换时使用，因为它会触发整个页面刷新。基本上，您的 jQuery mobile 页面将充当普通的 Web 应用程序。

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

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

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

于 2013-07-01T14:03:40.613 回答
3

你的问题并没有完全充满指针和提示，所以我会选择当我看到它时立即想到的东西。

使用 jQuery Mobile 更改页面时不会触发文档就绪，因为“hijax”是他们“ajaxifying”所有链接的方法。试试这个...

$(document).on("pageshow", function() {
    var url = window.location.search.substring(1);
    $('#mydiv').load('real_news.asp?' + url);
});
于 2013-07-01T13:13:43.170 回答
1

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);
});
于 2013-07-01T13:17:42.547 回答
0

似乎没有什么对我有用。尝试了许多不同的修复程序，但我让网站太乱了，即使某些 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>
于 2014-02-11T18:11:24.930 回答