加载新页面后未呈现文本 - JQuery Mobile

Posted 2023-05-09

【中文标题】加载新页面后未呈现文本 - JQuery Mobile

【英文标题】：Text is not being rendered after new pages loaded - JQuery Mobile

【发布时间】：2012-01-25 00:43:22

【问题描述】：

我有一个程序，它给出一个 SQL 语句（使用 html5-SQL 的浏览器数据库），它在我的 jquery 移动页面中填充一组字段。 SQL 语句根据通过 url 传递的 ID 进行更改。因此，当单击按钮/链接时，会使用不同的参数值调用同一页面：index.html?id=545。

虽然第一页是无缝加载的，但当我点击下一页的链接时，对象（页面、按钮、链接、div）会显示，但这些对象内的文本不显示。

我正在使用$('div').live('pageshow',function(event, ui) 事件来触发执行以下操作的事件：

$("#title").text(Title);
$("#date").text(mdate);

当我在 Chrome 调试器的控制台中打印 Title 和 mdate 的值时，它显示了正确的值。我不知道为什么按钮和标签中没有显示相同的文字。

谁能帮帮我。

谢谢

【参考方案1】：

使用 jQM 时，您需要刷新控件。以下是文档：

http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html

刷新表单元素在 jQuery Mobile 中，一些增强的表单控件是简单的样式（输入），但其他的是自定义的 控件（选择、滑块）构建自并保持同步， 本机控制。以编程方式更新表单控件 javascript，先操作原生控件，再使用刷新 告诉增强控件更新自身以匹配新控件的方法 状态。以下是一些如何更新常用表单控件的示例， 然后调用刷新方法：

复选框：

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

收音机：

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

选择：

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

滑块：

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

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

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

如果是你需要的页面，试试这个：

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

增强新标记页面插件调度一个 pagecreate 事件，大多数小部件使用该事件来自动初始化自己。只要 当一个小部件插件脚本被引用时，它会自动增强 它在页面上找到的小部件的任何实例。

但是，如果您生成新的标记客户端或通过以下方式加载内容 Ajax 并将其注入到页面中，您可以触发 create 事件 处理其中包含的所有插件的自动初始化 新的标记。这可以在任何元素上触发（甚至是页面 div 本身），省去了手动初始化每个插件的任务 （列表视图按钮、选择等）。

例如，如果加载了一个 HTML 标记块（比如登录表单） 在通过Ajax，触发create事件自动变换 它包含的所有小部件（在这种情况下为输入和按钮）到 增强版本。这个场景的代码是：

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

【讨论】：

您好菲尔，感谢您的回复。我没有任何特殊的控制来刷新。我只使用 h4 标签和链接/按钮。问题不在于渲染图形。设计方面的所有对象都完美呈现。我试着做 '$('#pagename').page('refresh')、$('#pagename').listview('refresh') 和 $('div').listview('refresh')'但是在加载新页面后它们都不起作用。任何其他建议。

我的页面太大，无法发布全部内容。我已经生成了一个 jsfiddle，其中的代码负责生成数据库、检索文本并将其打印到屏幕上。 jsfiddle.net/Vb8jE/1感谢您的帮助！

我已经用正确版本的 jQuery 更新了 fiddle，并在管理资源中添加了 jQM CSS 和 JS。 jQM 也不使用 document.ready jquerymobile.com/demos/1.0/docs/pages/page-scripting.html 这是更新后的jsfiddle.net/Vb8jE/3，因为我无法连接 html5sql（数据库），调试起来仍然是一个挑战。你能再补充一点吗？

我正在使用 document.ready 因为我只希望它在页面第一次加载时执行。正如我之前提到的，这不是完整的页面。这只是我用于 javascript 的代码。稍后我会添加更多内容。

我已经用我正在使用的大部分东西更新了 jsfiddle，尽管只在结果窗口中显示框架。 jsfiddle.net/Vb8jE/11