页面初始化后添加内容的 jQuery Mobile 渲染问题答案

【问题标题】：jQuery Mobile rendering problems with content being added after the page is initialized页面初始化后添加内容的 jQuery Mobile 渲染问题
【发布时间】：2011-04-13 15:31:27
【问题描述】：

我在一个项目中使用 jQuery Mobile 和 Backbone JS。它主要是使用 jQuery Mobile 的事件“pagebeforeshow”来触发正确的主干视图。在那个特定的 jQuery Mobile 页面的主干视图中，它正在执行所有需要的动态操作。视图所做的一些事情是使用 Underscore 的模板系统提取某些位。

这一切都很好，直到我使用模板系统提取表单位。例如，一组动态单选按钮（从主干集合生成）。我想使用 jQuery Mobile 提供的这些单选按钮来设计样式。目前，jQuery Mobile 没有选择这些动态注入的单选按钮。我之前在做滑块时通过再次调用 jQuery Mobile 小部件“slider()”方法解决了这个问题，它似乎刷新了它们......这些单选按钮似乎不是这种情况。

在主干视图中，我尝试再次调用小部件方法：

$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();

我也尝试了相反的方法，但似乎我需要这样做才能使分组样式等工作。但这似乎不正确！ ...当我单击单选按钮时，这样做也会导致错误，说：“无法在初始化之前调用 checkboxradio 上的方法；试图调用方法'刷新'”？

似乎 jQuery Mobile 中应该有一种方法可以重新初始化页面或其他什么？！我注意到源代码中有一个“页面”小部件。

创建页面后，jQuery Mobile 如何处理被注入 DOM 的表单/元素？有没有一种干净的方式来处理它如何组成表格？必须有一种简洁的方式来调用表单以呈现“jQuery Mobile 方式”，而不仅仅依赖于基本 HTML 中的数据属性标签？

非常感谢您对这个问题的任何帮助或洞察...我非常愿意尝试让 Backbone JS 和 jQuery Mobile 很好地协同工作。

非常感谢，詹姆斯

【问题讨论】：

标签： javascript jquery jquery-mobile backbone.js

【解决方案1】：

更新

由于 jQueryMobile beta2 有一个事件可以做到这一点。 .trigger('create') 在一个元素上使其内部的所有内容都被正确绘制。

另一个不是重复的问题，但需要我发布超过 10 次的答案:)

[旧答案]

试试.page()

我的常见问题解答中的更多详细信息： http://jquerymobiledictionary.pl/faq.html

【讨论】：

谢谢。我听从了你的话。在这种特殊情况下，我不得不使用 $(element).page("destroy").page() 出于某种原因？但即使这样也不太奏效。它正确地呈现了内容，但它不能正常工作。得到同样的错误：“无法在初始化之前调用 checkboxradio 上的方法；试图调用方法'refresh'”......奇怪。
.page 可以在一个元素上调用一次。您必须围绕动态添加的内容创建一个包装 div。
呃，这太愚蠢了。所以如果我有一个 100% ajax 的页面并且我想一遍又一遍地重新加载我的选项，我必须每次都创建一个包装元素！一定是更好的方法。
如果你想让它更好——创建一次 HTML——在一个 .html 文件中并且从不覆盖任何 DOM 节点，只需将数据作为 JSON 获取并使用 $(element) 将其放在正确的位置。文本（）。展开列表视图时，使用 .listview('refresh')。使用表单元素时 - 使用它们的刷新方法。如果不可用 - 仅重建有问题的控件。

【解决方案2】：

刷新整个页面对我有用：

$('#pageId').page('destroy').page();

【讨论】：

【解决方案3】：

我不确定这是否有帮助，但是在添加动态元素时，我在成功的 ajax 调用本身中使用了 .page()（例如 here 和 here），但我发现它没有按预期工作。我发现在 ajax 调用中最好刷新元素（如果它是表单元素）以使用these documented methods：

复选框：

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

收音机：

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

选择：

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

滑块：

$("input[type=range]").val(60).slider("refresh");

翻转开关（他们使用滑块）：

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

如果要添加非表单元素，请使用 .page()

【讨论】：

【解决方案4】：

JQuery Mobile 现在支持 .trigger("create");这将为您解决这个问题

【讨论】：

【解决方案5】：

尝试在具有新内容的元素上调用 .trigger("create")。

【讨论】：

【解决方案6】：

我需要一种在初始化 JQM 页面后动态刷新它的方法。我发现如果我在“pagehide”事件期间删除了数据属性“page”，下次显示JQM页面时它会重新初始化。

$('#testing').live('pagehide', function (e) {
    $.removeData(e.target, 'page');
});

【讨论】：

不错的把戏。我希望它是无关紧要的，因为创建事件存在，但仍然很高兴知道数据中有类似“页面”键的东西

【解决方案7】：

$('#pageId').page('destroy').page();

适用于生成的整个控制组，更不用说无线电输入子级了。

-迈克

【讨论】：

【解决方案8】：

当我在封闭的 div 元素上调用 .trigger('create') 时，它对我有用。请参见下面的示例：

在 .html 文件中：

<div id="status-list" data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose as many snacks as you'd like:</legend>
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
            <label for="checkbox-1a">Cheetos</label>
    </fieldset>
</div>

在 .js 文件中：

$("#status-list").trigger('create');

【讨论】：

【解决方案9】：

对我来说只有.page() 有效（没有.page('destroy')）。

例如：

$('my-control-group-id').page();

安农

【讨论】：

【解决方案10】：

我有点跑题了。我希望能够阻止 jqm 在 init 上创建第一个默认页面 div，因为骨干无论如何都会将元素包装在 div 中。我想动态地将页面插入 DOM，然后调用 jqm 来创建它的类和小部件。我终于这样做了：

 <head>
 <script src="jquery-1.8.3.js"></script>
 <script type='javascript'>
 $(document).on("mobileinit", function () {  
 $.mobile.autoInitializePage = false;       
 }
 </script>
 <script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
 </head>
 <body>
 ....... dynamically add your content ..........

 <script type='javascript'>
 $.mobile.initializePage() 
 </script>
 </body>

还有我的洞 jqm 配置（你放在 jqm.js 之前）

$(document).on("mobileinit", function () {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
  $.mobile.changePage.defaults.changeHash = false;

  $.mobile.defaultDialogTransition = "none";
  $.mobile.defaultPageTransition = "slidedown";
  $.mobile.page.prototype.options.degradeInputs.date = true;
  $.mobile.page.prototype.options.domCache = false;
  $.mobile.autoInitializePage = false;

  $.mobile.ignoreContentEnabled=true;
});

到目前为止，Backbone 和 JQM 运行良好。

【讨论】：

【解决方案11】：

尝试使用 enhanceWithin() 方法。这应该是使用 jQuery Mobile 时任何 jQuery 对象的方法。

【讨论】：