Javascript 页面初始化后添加内容的 jQuery Mobile 呈现问题

jQuery Mobile rendering problems with content being added after the page is initialized

提问by littlejim84

I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.

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

This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.

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

In the Backbone View, I tried calling the widget methods again:

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

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

I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?

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

It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.

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

How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?

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

Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.

对这个问题的任何帮助或洞察将不胜感激......我非常致力于让 Backbone JS 和 jQuery Mobile 很好地协同工作。

Many thanks, James

非常感谢，詹姆斯

回答by naugtur

update

更新

Since jQueryMobile beta2 there is an event to do this. .trigger('create')on an element to cause everything inside it to be painted correctly.

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

Another question that is not a duplicate, but requires an answet I posted over 10 times :)

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

[old answer]

[旧答案]

try .page()

尝试 .page()

More details in my faq: http://jquerymobiledictionary.pl/faq.html

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

回答by Phill Pafford

I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example hereand here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:

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

• Checkboxes:

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

• Radios:

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

• Selects:

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

• Sliders:

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

• Flip switches (they use slider):

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

• 复选框：

  $("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");
  

and for adding a non-form element use .page()

并添加非表单元素使用 .page()

回答by Jaime Botero

Refreshing the whole page worked for me:

刷新整个页面对我有用：

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

回答by Rob Fuller

JQuery Mobile now supports .trigger("create"); which will resolve this for you

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

回答by Pavel Savara

Try calling .trigger("create") on the element with the new content.

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

回答by Scott Woodall

I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.

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

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

回答by Michael Ellan

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

works for entire control groups that are generated, let alone radio input children.

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

-Mike

-麦克风

回答by Jesper Bischoff-Jensen

It worked for me when I called .trigger('create') on the enclosing div element. See example below:

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

In .html file:

在 .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>

in .js file:

在 .js 文件中：

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

回答by Andree

Try use enhanceWithin()method. This should be method of any jQuery object while using jQuery Mobile.

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

回答by amnonkhen

For me only .page()worked (without the .page('destroy')).

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

E.g.:

例如：

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

Amnon

暗嫩