jquery-mobile - JQuery Mobile 将样式应用于新添加的元素

Question

在 JQuery Mobile 中，我有一个导航栏，如下所示：

<div id="nav_bar" data-role="navbar">
    <ul>
        <li><a>video</a></li>
        <li><a>music</a></li>
        <li><a>picture</a></li>
    </ul>
</div>

现在说我希望导航栏只显示“一些内容”。这是我的代码：

$("#nav_bar ul").html("<li><a>some content</a></li>");

但是内置的 JQuery Mobile 样式不适用于它。我怎样才能做到这一点？

提前致谢。

Answer 1

打开页面时，会运行一个脚本来添加所有必要的类。替换项目不会重新运行脚本。

我认为如果不通过在文本中指定类/使用变量或以下内容手动添加类，您就无法做到这一点：

$("#nav_bar ul").html('<li><a>some content</a></li>').children('li').addClass('class-one class-two');

Answer 2

$("#nav_bar ul").html("<li><a>some content</a></li>");

.html() 方法销毁 ul 元素及其内容，然后添加新内容。

您应该改用 .append() 。

$("#nav_bar ul").append("<li><a>some content</a></li>");

如果你真的想替换原来的内容。

定位 div 并使用 .html() 方法

$("#nav_bar").html("<ul><li><a>some content</a></li></ul>");​