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樣式不適用於動態創建

回答

相關問題