Javascript 初始化页面后添加内容时出现jQuery Mobile呈现问题_Javascript_Jquery_Jquery Mobile_Backbone.js

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

javascript jquery jquery-mobile backbone.js

Javascript 初始化页面后添加内容时出现jQuery Mobile呈现问题,javascript,jquery,jquery-mobile,backbone.js,Javascript,Jquery,Jquery Mobile,Backbone.js,我在一个项目中使用jQuery Mobile和主干JS。它主要是工作的，使用jQuery Mobile的事件“pagebeforeshow”来触发正确的主干视图。在特定jQuery移动页面的主干视图中，它正在执行所有需要的动态操作。视图所做的一些事情是使用下划线的模板系统拉入某些位在我使用模板系统提取表单位之前，这一切都很好。例如，一组动态单选按钮（从主干集合生成）。这些单选按钮我想使用jQuery Mobile提供的功能来设计。目前，jquerymobile没有选择这些动态注入的单选按钮。我

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

在我使用模板系统提取表单位之前，这一切都很好。例如，一组动态单选按钮（从主干集合生成）。这些单选按钮我想使用jQuery Mobile提供的功能来设计。目前，jquerymobile没有选择这些动态注入的单选按钮。我以前在做sliders时解决了这个问题，只需再次调用jQuery移动小部件“slider（）”方法，它似乎会刷新它们。。。这些单选按钮似乎不是这样的

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

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

我也尝试过另一种方法，但似乎我需要这样做才能使分组样式工作等等。但这似乎不正确。。。当我单击单选按钮时，这样做也会导致错误，比如：“无法在初始化之前调用checkboxradio上的方法；尝试调用方法‘刷新’”

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

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

任何对这个问题的帮助或洞察都将不胜感激。。。我非常希望主干JS和jQuery Mobile能够很好地协同工作

非常感谢，詹姆斯更新

由于jQueryMobile beta2，因此有一个事件可以执行此操作<对元素执行code>.trigger（'create'），以正确绘制元素内部的所有内容

另一个问题不是重复的，但需要一个answet（我发布了10多次）：）

[旧答案]

尝试

.page（）

更多详细信息，请参见我的常见问题解答：

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

复选框：

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

翻转开关（使用滑块）：

要添加非表单元素，请使用.page（）

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

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

刷新整个页面对我很有用：

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

JQuery Mobile现在支持.trigger（“创建”）；这将为您解决此问题

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

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

-迈克

只有

.page（）

对我有效（没有

.page（'destroy'）

）

例如：

Amnon

尝试在包含新内容的元素上调用.trigger（“create”）。

我有点离题了。我希望能够阻止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工作正常

当我在封闭的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>

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

谢谢。我听了你的话。在这个特殊的例子中，出于某种原因，我不得不使用$（element.page（“destroy”）.page（）？但即使这样也不太管用。它正确地呈现了内容，但工作不正常。获取相同错误：“无法在初始化之前调用checkboxradio上的方法；尝试调用方法“刷新”。。。奇怪。

.page

可以对元素调用一次。您必须在动态添加的内容周围创建一个包装div。呃，这是一个错误。因此，如果我有一个100%ajax的页面，并且我想一遍又一遍地重新加载我的选项，那么每次我都必须创建一个包装元素！一定是更好的方法。如果您想让它更漂亮-在一个.HTML文件中创建一次HTML，并且永远不要覆盖任何DOM节点，只需将数据作为JSON获取，并使用$（element）.text（）将其放在正确的位置。展开listview时，请使用.listview（“刷新”）。使用表单元素时-使用其刷新方法。如果不可用-只重建有问题的控件。很好的技巧。我希望这是不相关的，因为create事件存在，但知道数据中有类似于“page”键的东西仍然很好

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

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

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

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