Javascript 在页面上初始化jquery移动小部件会给出；无法读取属性'；jQuery…'；“未定义”的定义；

该站点有2个（或更多）HTML页面，如下所示：

<div id="page1" data-role="page">
    <div data-role="content" id="page1-content">
        <a href="#page2" data-role="button">Next Page</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content" id="page2-content">
        <a href="#page1" data-role="button">Go Back</a>
    </div>
</div>

我做错了什么

我真的希望能够开始获取数据，并在开始时至少在每个页面中一次创建DOM，而不是等到用户单击“下一页”

---

另外-第一页上的列表视图与“下一步”按钮重叠。我经常看到这种重叠，我也想解决/理解这一点。

这可能是您正在使用的版本组合的一个特殊问题，但在检查之前，我会尝试在“pageinit”事件上授权，而不是在常规文档就绪时授权

请试试这个：

$(document).on('pageinit',function(){
    $('#page1-content, #page2-content').each(function(){
        var ul = $('<ul>');
        $.each(['one','two','three'], function(item){
            ul.append('<li><a href="#">'+item+'</a></li>');
        });
        ul.appendTo(this).listview();
    });
});

$（document）.on（'pageinit'，function（）{
$（“#第1页内容，#第2页内容”）。每个（函数（）{
var ul=$（“
”）；
$。每个（['1'、'2'、'3']，功能（项目）{
ul.追加（“
”）；
});
ul.appendTo（this.listview（）；
});
});

Page

data role=Page

在jQuery Mobile中经历了不同的阶段，如下图所示

图像/图表来源：

手动增强小部件应仅在活动页面上调用，否则将导致错误

要在不同的页面上添加新元素，您需要在事件发生时这样做，而无需调用任何增强方法。因为小部件将在该阶段自动初始化/增强

另外，您的代码中有一个错误，您没有关闭

ul

标签。但是，这并没有导致错误

下面的代码显示了如何在不需要手动调用任何增强方法的情况下向不同的页面添加元素

$(document).on("pagecreate", "[data-role=page]", function (e) {
    var ul = $('<ul data-role="listview" data-inset="true"></ul>'),
        html = '';
    $.each(['one', 'two', 'three'], function (item) {
        html += '<li><a href="#">' + item + '</a></li>';
    });
    ul.append(html);
    $('[data-role=content]', this).append(ul);
});

$（文档）。在（“pagecreate”、“[data role=page]”上，函数（e）{
var ul=$（'
），
html=''；
$。每个（['1'，'2'，'3'，]，功能（项目）{
html+='
'；
});
ul.append（html）；
$（'[data role=content]'，this）.append（ul）；
});

---

似乎它部分工作，它给出了一些错误的前面和第一页没有正确初始化。但是当你转到第二页时，你会看到它在那里很好，然后回到第一页，第一页在切换到第二页后的某个时候被初始化。你不能在尚未创建的页面上调用增强功能。如果删除#page2内容或访问该页面，然后调用增强功能，则该功能将正常工作。@Omar我不确定您所说的“调用增强”到底是什么意思-我是jquery mobile新手，因此我不熟悉该术语。另外，当你说页面“还没有创建”时，我似乎很困惑，因为该页面的

在HTML文档中。什么时候“创建”页面？这意味着什么？调用增强意味着手动创建/修改小部件，即

.listview（）

。我很抱歉在这个问题上附加一件事-但是你能看一下这把小提琴吗：-在这种情况下，我想在一段时间后动态地向

ul

添加一些

li

标记（模拟ajax调用）。但我不知道第2页是否已初始化-添加那些

li

并且不抛出错误的最简单方法是什么？在这个提琴中，如果您立即单击“下一页”，您将看到问题。@codefactor您是否要使用setTimeout函数，或者只是为了演示？我添加setTimeout的原因是为了模拟如果我在加载页面时启动AJAX调用会发生什么-然后当AJAX调用返回时，数据可用。您可以这样做@codefactor再次感谢您的帮助-我还发现了一些其他有效的方法。如果我这样做了会怎么样：

$（“#myitems”）.closest（“.ui page”）.trigger（'create'）

总是不执行

if（…）{..listview（'refresh'）

——我看到create的好处是，当AJAX回来时，我可以创建许多具有

数据角色的小部件，它们都会增强功能（没有在if语句内部显式调用增强函数。或者，这可能会在生命周期中无序增强，并且由于某种原因会变得不好？
$(document).on('pageinit',function(){
    $('#page1-content, #page2-content').each(function(){
        var ul = $('<ul>');
        $.each(['one','two','three'], function(item){
            ul.append('<li><a href="#">'+item+'</a></li>');
        });
        ul.appendTo(this).listview();
    });
});

$(document).on("pagecreate", "[data-role=page]", function (e) {
    var ul = $('<ul data-role="listview" data-inset="true"></ul>'),
        html = '';
    $.each(['one', 'two', 'three'], function (item) {
        html += '<li><a href="#">' + item + '</a></li>';
    });
    ul.append(html);
    $('[data-role=content]', this).append(ul);
});