jQuery Mobile增强版;动态重新生成的html

jQuery Mobile "enhance" dynamically re-generated html

本文关键字：新生 html 动态 Mobile 增强 jQuery      更新时间：2023-09-26

jQuery Mobile 1.2.0

我使用JavaScript ($(selector).html(content))生成HTML，将其添加到DOM中，然后显示它($.mobile.changePage())。

然后我调用一个AJAX调用，获得一些数据，并重新生成html(但父元素，相同的$(selector)，保持不变，我只是改变了它的html(...))。
此时，HTML没有被jQM"增强"，也没有应用样式。

现在根据文档，我应该简单地调用父元素上的page()函数，即$(selector).page()。

文档中的其他地方建议触发create事件，即$(selector).trigger("create")。

问题是以上两种方法都不起作用——jQM的样式没有应用。

查看jQM的代码，我已经尝试在该元素上触发pagecreate事件，并且它确实工作，但是，这在任何地方都没有记录，所以我不确定它，特别是关于jQM的未来版本。

在文档中我读到我只能在一个页面上调用一次page() .

无论如何，是否有任何简洁/标准的方法来告诉jQM"增强"整个元素及其子元素?或者我应该继续触发pagecreate事件?

谢谢!

要重新创建整个页面，请使用:

$(selector).trigger("pagecreate");

这是我对类似问题的回答:https://stackoverflow.com/a/14011070/1848600。这里有一个页面再造的例子。看一下，这可能会解决你的问题。

的范围是什么$(选择).trigger("创造");

你应该能够在'pageshow' jqm样式应用于元素之前的' pagcreate '事件上添加任何元素。例如，我像这样动态地添加页眉/页脚

$(document).on('pagecreate', "[data-role=page]", function() {
var header = "<div data-role='header'>some header stuff</div>";
 var footer= "<div data-role='footer'>some footer stuff</div>";
$(this).prepend(header);
$(this).append(footer);
$("[data-role=header]").fixedtoolbar({tapToggle: false});
$("[data-role=footer]").fixedtoolbar({tapToggle: false});
});

确保你使用的是jquery 1.7或以上版本，我想那是on方法被引入的时候;

听起来你可能会生成DOM，然后改变页面，试试另一种方式先去页面，然后动态编辑DOM。

编辑将重新加载页面选项设置为true

  $.mobile.changePage($(page), {reloadPage: true});

编辑2
$(selector).children().each(function(){
   $(this).trigger('create');
})
相关文章：