jQuery Mobile：div 标签的列表视图（刷新）？

Question

我是 jQuery mobile（和 JS :)）的新手，如果我说的东西看起来太简单了，请原谅。我在网上搜索了两天，没有找到解决办法。

我想知道是否有一些功能与 $(#someList).listview('refresh') 相同，但用于 div 标签。我有两个 div 标签，当我动态更改其内容时，它们会失去样式。

代码：

function muestraFicha() {
    var categoriaFicha = "Ciencia / Matemáticas";
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?";
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo";
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>"

    $("#fichaRespuesta").empty(); //vaciamos la ficha
    $("#fichaRespuesta").append("<h4> Respuesta </h4>");
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

    $("#fichaPregunta").empty();
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");
}

所以，在函数结束时，我需要一些 .listview('refresh') 或 html 仅在第一次调用函数时设置样式。

失去风格的 div 是 fichaRespuesta 和 fichaPregunta。

谢谢。

Answer 1

如果你想让任何新的 DOM 元素具有 jQuery Mobile 样式，你可以使用.trigger('create'); 函数：

新的“创建”事件：一次轻松增强所有小部件

虽然页面插件不再专门调用每个插件，但它 确实调度了一个“pagecreate”事件，大多数小部件都使用该事件 自动初始化自己。只要一个小部件插件脚本是 引用，它将自动增强小部件的任何实例 它可以在页面上找到，就像以前一样。例如，如果选择菜单 插件已加载，它将增强它在新找到的任何选择 已创建页面。

这个结构现在允许我们添加一个新的创建事件，它可以 在任何元素上触发，为您节省手动初始化的任务 该元素中包含的每个插件。直到现在，如果开发商 通过 Ajax 或动态生成的标记加载到内容中，它们 需要手动初始化所​​有包含的插件（列表视图按钮， select 等）以增强标记中的小部件。

现在，我们方便的创建事件将初始化所有必要的插件 在该标记中，就像页面创建增强 过程有效。如果您要使用 Ajax 加载 HTML 块 标记（比如登录表单），您可以触发创建自动 转换它包含的所有小部件（这里的输入和按钮 案例）进入增强版本。这个场景的代码是：

$( ...包含小部件的新标记... ).appendTo( ".ui-page" ).trigger("创建");

创建与刷新：一个重要的区别

请注意，create 事件之间有一个重要区别 和某些小部件具有的刷新方法。 create 事件很合适 用于增强包含一个或多个小部件的原始标记。这 一些小部件具有的刷新方法应该用于现有的 （已增强）已以编程方式操作的小部件 并且需要更新 UI 以匹配。

例如，如果您有一个页面，其中动态附加了一个新的 页面创建后具有 data-role=listview 属性的无序列表， 在该列表的父元素上触发创建会改变它 进入列表视图样式的小部件。如果有更多的列表项 以编程方式添加，调用列表视图的刷新方法将 仅将那些新列表项更新为增强状态并离开 现有的列表项保持不变。

以上信息链接：http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

我还注意到您连续使用相同的选择器，您可以通过将选择器的调用链接在一起来大大提高代码的性能，如下所示：

变化：

$("#fichaRespuesta").empty(); //vaciamos la ficha
$("#fichaRespuesta").append("<h4> Respuesta </h4>");
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty();
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");

收件人：

$("#fichaRespuesta").empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");

请注意，我删除了其中一个 .append() 调用，因为连续调用两次会产生额外的开销；相反，我将两个 .append() 调用的 HTML 放在一个调用中。

如果您真的想提高代码性能，请缓存选择器，这样它们只需查找一次，如下所示：

var $fichaRespuesta = $('#fichaRespuesta'),
    $fichaPregunta  = $('#fichaPregunta');
function muestraFicha() {
    /*I removed your extra code to make this easier to read*/

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");