Question

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

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

Answer 1

要了解此问题，您需要了解jQuery Mobile的工作原理。

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

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

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

Why I have to put all the script to index.html in jquery mobile（或this blog article）
Link fails to work unless refreshing

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

此问题的基本解决方案是：

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

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

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

如果您想了解有关页面事件的更多信息以及为什么要使用这些事件而不是文档，请在我的个人博客上查看此article。或者找到它here。

Answer 2

你的问题并不完全是指针和提示，所以当我看到它时，我会立即想到的东西。

由于“hijax”，他们的方法是“ajaxifying”所有链接，因此使用jQuery Mobile不会触发文档就绪。试试这个......

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

Answer 3

尝试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);
});

Answer 4

似乎没有任何对我有用的东西。尝试了许多不同的修复，但我使网站太乱，甚至某些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>

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

4 个答案: