在用javascript創建的div內附加jQuery選項卡

Question

我想在使用javascript創建的div內使用jQuery選項卡（http://jsfiddle.net/43FcS/2/）。

現在我正在創建一家店，我正在工作的店鋪定位器。我使用由Bjorn（http://www.bjornblog.com/web/jquery-store-locator-plugin）創建的jQuery商店定位器插件。

當用戶點擊搜索時，會列出搜索結果（距離輸入地址最近的4家商店）。在每一個李我想到創建一個類與「shoptab」的div。在每個div中，我想要顯示2個選項卡（地址和開放時間），如上面的鏈接所示。 我的JavaScript創建具有下列功能李：

$('<li />').html("<div class=\"shoptab\"><h2 class=\"loc-name\"> Shop " + storeName + "<\/h2> <ul><li><a href=\"#tabs-1\">Address<\/a><\/li> <li><a href=\"#tabs-2\">Opening hours<\/a><\/li><\/ul> <div id=\"tabs-1\"><p>" + storeAddress1 + "<\/p> <p>" + storeAddress2 + "<\/p> <p>" + storeCity + ", " + storeState + " " + storeZip + "<\/p> <p>" + storePhone + "<\/p> <\/div> <div id=\"tabs-2\"><p>" + storeHours1 + "<\/p> <p>" + storeHours2 + "<\/p> <p>" + storeHours3 + "<\/p> <\/div><\/div>") 

我知道我不能使用IDS標籤-1和標籤-2，因爲它們會被多次使用，但現在我只是他們想ATLEAST秀然後調整代碼給div的ID 1,2,3,4等。

我對jQuery選項卡的功能與我的shoplocator函數一起寫入文檔的底部。

$(function() { 
     $(".shoptab").tabs(); 
    }); 

jQuery的ui腳本不適用於shoptab div和ul/li內的類，我不知道如何使它工作。

我希望通過這些信息你能幫助我。

Answer 1

我認爲問題是$(".shoptab").tabs();在文檔中存在必需的html之前調用。

你應該叫$(".shoptab").tabs();您插入文檔即在HTML後畢竟的

$('<li />').html("<div class=\"shoptab\"><h2 class=\"loc-name\"> Shop " + storeName + "<\/h2> <ul><li><a href=\"#tabs-1\">Address<\/a><\/li> <li><a href=\"#tabs-2\">Opening hours<\/a><\/li><\/ul> <div id=\"tabs-1\"><p>" + storeAddress1 + "<\/p> <p>" + storeAddress2 + "<\/p> <p>" + storeCity + ", " + storeState + " " + storeZip + "<\/p> <p>" + storePhone + "<\/p> <\/div> <div id=\"tabs-2\"><p>" + storeHours1 + "<\/p> <p>" + storeHours2 + "<\/p> <p>" + storeHours3 + "<\/p> <\/div><\/div>") 

已執行