jquery样式不适用于动态创建

我在jquery mobile中创建了可折叠的listview。它是动态的。如果我创建可折叠的HTML代码，它显示正常。我尝试动态地使用了同一个样式，则样式不适用。jquery样式不适用于动态创建

代码的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动态创建。我的代码有什么问题..请帮助我.. 在此先感谢...

来源

2012-10-22 Lokesh

你的意思是什么风格？ 'div's，'h2'和列表的CSS？ – Bergi

Jquery角色，如data-role =“collapsible”，不适用于动态创建。 – Lokesh

当然，它们只是数据属性。你如何期待任何代码来创造它们？你必须明确应用 – Bergi

在jQuery手机中，当您动态添加内容时，您需要初始化内容，或者如果要添加内容（例如添加项目一个列表视图）你需要刷新内容。

如果您有几个需要初始化的项目，您可以将页面上的create event全部触发到initialize。 pageshow事件中通常最好这样做。

例如

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

来源

2012-10-22 13:33:45 Jack

这可以在动态内容实际添加到DOM之前触发'pageshow'事件的情况下创建争用条件。在将元素添加到DOM后，运行'.trigger（'create'）'代码将会好得多。 – Jasper

的确如此，除了我发现有时JQM不会正确地增强内容，除非它在'pageshow event'中被调用。我很久以前遇到过这个问题（不记得JQM的版本是1.0还是更早），所以这可能不再是问题。 – Jack

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

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

来源

2012-10-22 13:33:55

jquery样式不适用于动态创建

回答

相关问题