javascript - jquery 样式未应用于动态创建

Question

我在 jquery mobile 中创建了可折叠 ListView 。它是动态的。如果我在 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

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

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