javascript - jquery样式不适用于动态创建

Question

我在 jquery mobile 中创建了可折叠的列表视图。它是动态的。如果我在 html 代码中创建了可折叠，它显示得很好。我动态尝试的同一个，然后不应用样式。

Html页面中的代码：

<div data-role="collapsible">
                    <h2>Bucks County<br>BU</h2>
                    <ul data-role="listview">
                        <li><a href="index.html">Location </a></li>
                    </ul>
            </div>

jQuery中的代码：

$("#lsititems").append('<div data-role="collapsible">'+
                    '<h2>'+data[0].SiteName+'<br>'+data[0].SiteCode+'</h2>'+
                    '<ul data-role="listview">'+
                    '<li>'+'<a href="index.html">'+'Location'+'</a>'+'</li>'+
                    '</ul>'+
                    '</div>') 

我也试过这个：

$("#lsititems").append("<div data-role='collapsible'>"+
                                "<h2>"+data[1].SiteName+"<br>"+data[1].SiteCode +"</h2>"+
                                "<ul data-role='listview'>"+
                                "<li>"+"<a href='index.html'>"+"Location"+"</a>"+"</li>"+
                                "</ul>"+
                                "</div>")  

输出/输出：

从上面的代码中，第一个是从 Html 创建的，第二个和第三个是在 jquery 中动态创建的。我的代码有什么问题..请帮助我..提前谢谢...

Answer 1

在 jQuery mobile 中，当您动态添加内容时，您需要初始化内容，或者如果您正在添加内容（例如向列表视图添加项目），则需要刷新内容。

如果您有多个项目需要初始化，您只需触发create event页面上的 即可初始化所有项目。通常最好在pageshow事件中这样做。

例如

$("#mypage").on('pageshow', function () {
   $(this).trigger("create");
});

Answer 2

对于动态添加的内容，您需要调用.collapsible()方法：

$('div[data-role=collapsible]').collapsible();