Question

我是jQuery mobile（和JS :)的新手，请原谅，如果我说的话看起来太容易了。我已经在互联网上搜索了两天，但还没有找到解决方案。

我想知道是否有一些功能与$（＃someList）.listview（'refresh'）相同，但对于div标签。我有两个div标签，当我在dinamycally改变它的内容时，他们松开了造型。

代码：

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

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

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

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

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

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

$（...包含小部件的新标记...）。appendTo（“.ui-page”   ）.trigger（“创造”）;

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

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

例如，如果您有一个动态添加新页面的页面   页面创建后带有data-role = listview属性的无序列表，   在该列表的父元素上触发create会对其进行转换   进入listview风格的小部件。如果有更多的列表项   以编程方式添加，调用listview的refresh方法   将这些新列表项更新为增强状态并离开   现有的清单项目未受影响。

链接到上述信息：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>");

jQuery Mobile：div标签的listview（刷新）？

1 个答案: