jquery样式未应用于动态创建

时间:2012-10-22 13:25:20

标签: javascript listview jquery-mobile

我在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>")  

O / P:

enter image description here

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

2 个答案:

答案 0 :(得分:0)

在jQuery mobile中,当您动态添加内容时,您需要初始化内容,或者如果要添加内容(例如将项目添加到列表视图),则需要刷新内容。

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

例如

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

答案 1 :(得分:0)

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

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