如果从 ajax 加载的页面调用 jquery mobile changePage 不起作用

Question

情况：
form1.html 有一个按钮
单击该按钮会调用 $.mobile.changePage('../site3/form2.html');
这里没问题。一切都如预期的那样，页面已加载。我们称之为 form2.html

form2.html 有 2 个部分：
(1) #SiteForm 和
(2) #SiteSearched

单击#SiteForm 上的按钮应调用
$.mobile.changePage('../site3/form2.html#SiteSearched');

现在这是奇怪的部分。 如果我直接加载页面 form2.html 并按下按钮，它会起作用，我会看到 #SiteSearched JQM 页面。

但是，如果我从 form1.html 开始，单击按钮进入 form2.html#SiteForm，然后单击按钮，附加函数中的所有内容都会执行，除了调用 $.mobile.changePage('.. /site3/form2.html#SiteSearched');

我知道这部分是由 AJAX 加载的，changePage 命令不起作用吗？

（注意：Form1 可能已将我不想丢失的数据填充到表单中。Form2.html 旨在进行搜索并将结果以某种方式返回给 Form1，这就是我这样做的原因.)

Answer 1

在发帖之前你应该阅读官方的 jQuery Mobile 文档，这里已经解释了一切，但是让我给你一个简短的解释。

jQuery Mobile 有两种模板解决方案，一种是多页面，一种是多html。你已经知道了，因为你正在混合它们。但是，你不知道的是（从 AJAX 页面处理的角度来看）：

• 只有第一个 HTML 页面完全加载到 DOM 中，所有内容都已加载，包括 HEAD 内容。因此，如果初始 HTML 页面有多个 data-role="page"

  容器，每个容器都会加载到 DOM 中。

• 但是，每个后续页面都只加载了一部分。基本上，如果您的第二个、第三个 ... 页面有多个 data-role="page" div 容器，则只有第一个 div 容器会加载到 中。 jQuery Mobile 将丢弃所有其他内容。

所以在你的情况下，如果 form2.html 有：

(1) #SiteForm 和 (2) #SiteSearched

jQuery Mobile 将仅加载 #SiteForm，#SiteSearched 将被丢弃。

基本上这条线是行不通的：

$.mobile.changePage('../site3/form2.html#SiteSearched'); 

正如我告诉你的，你不能在后续页面中挑选特定页面。你只能使用这个：

$.mobile.changePage('../site3/form2.html'); 

jQuery Mobile 会在 form2.html 页面中向您显示第一个 data-role="page" 出现。

阅读更多关于 here 和 here 的信息。