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

我正在为项目使用jQuery Mobile和Backbone JS。这主要是工作，使用jQuery Mobile的事件'pagebeforeshow'来触发正确的骨干视图。在特定的jQuery Mobile页面的Backbone View中，这就是它在做所有需要的动态事物的地方。视图所做的一些事情是使用Underscore的模板系统吸引特定的位。jQuery Mobile呈现页面初始化后添加内容的问题

这一切都很棒，直到我使用模板系统拉动表单位。例如，一组动态单选按钮（由Backbone Collection生成）。这些单选按钮我想使用jQuery Mobile提供的功能进行设计。目前，jQuery Mobile没有采用这些动态注入的单选按钮。我之前通过再次调用jQuery Mobile小部件“slider（）”方法执行滑块时解决了此问题，并且它似乎刷新了它们......这似乎并不适用于这些单选按钮。

中的骨干视图，我试图再次调用控件的方法：

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

我尝试过其他的方式太绕，但它似乎我需要做的是这样的分组造型工作等但这看起来不正确！ ...当我单击单选按钮时，这样做也会导致错误，并说：“在初始化之前无法在checkboxradio上调用方法;试图调用方法'refresh'”？

似乎应该有一种方法在jQuery Mobile中重新初始化页面或其他东西？我注意到源代码中有一个'页面'小部件。

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

任何帮助或深入了解这个问题将不胜感激...我非常想尝试让Backbone JS和jQuery Mobile良好地协作。

非常感谢，詹姆斯

来源

2011-04-13 littlejim84

更新

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

的另一个问题，是不是重复，而是需要一个answet我贴过10次:)

[老答案]

尝试在我的常见问题.page()

来源

2011-04-14 07:53:15 naugtur

谢谢。我遵循你的话。在这种特殊情况下，我不得不使用$（element）.page（“destroy”）。page（）出于某种原因？但即使这样也不行。它正确地呈现了内容，但它不正确。获得相同的错误：“在初始化之前无法在checkboxradio上调用方法;尝试调用方法'refresh'”......奇怪。 – littlejim84 2011-04-14 10:28:56

'.page'可以在元素上调用一次。你必须围绕你动态添加的内容创建一个包装div。 – naugtur 2011-04-14 11:04:22

呃，那是stoopid。所以如果我有一个100％的Ajax页面，我想重新加载我的选项，我必须每次创建一个包装元素！必须是更好的方法。 – 2011-06-06 23:52:27

我不确定这是否有帮助，但添加动态元素时，我在成功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");

和用于添加非表格元件使用。第（）

来源

2011-04-14 11:55:50

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

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

来源

2011-07-19 20:19:26

不错的把戏。我希望这是不存在的，因为创建事件存在，但仍然很高兴知道在数据中有'页面'键 – naugtur 2012-10-13 08:42:31

刷新整个页面为我工作：

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

来源

2011-07-20 17:28:21

该解决方案与JQMbeta2不同。请删除。 – naugtur 2012-10-13 08:37:57

jQuery Mobile的现在支持.trigger（ “创建”）;这将为您解决这个问题

来源

2011-07-23 23:18:47

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

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

-Mike

来源

2011-08-27 00:20:01

此答案自JQMbeta2以来不正确。请删除 – naugtur 2012-10-13 08:39:52

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

例如为：

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

阿姆农

来源

2011-09-03 07:18:26 amnonkhen

自JQMbeta2以来，此解决方案不正确。请删除。 – naugtur 2012-10-13 08:41:16

尝试用新的内容元素上调用.trigger（ “创建”）。

来源

2012-05-23 12:10:32

为我工作，谢谢！ – 2013-03-18 13:24:44

我有点偏离主题。无论如何，我希望能够阻止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; 
});

到目前为止骨干和JQM一直工作正常。

来源

2013-02-11 14:55:09 zzart

当我在封闭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');

来源

2013-08-19 08:36:44 bitestar

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

来源

2015-03-02 08:41:45 Andree

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

回答

相关问题