在動態創建的嵌套式手風琴中刷新子

Question

我試圖在用戶單擊按鈕時動態地將項追加到嵌套的手風琴。我使用下面的代碼來創建一個嵌套的手風琴：

$(".accordion").accordion({ 
    collapsible: true, 
    autoHeight: false, 
    animated: 'swing', 
    heightStyle: "content", 
    changestart: function(event, ui) { 
     child.accordion("activate", false); 
    } 
}); 

var child = $(".child-accordion").accordion({ 
    active:false, 
    collapsible: true, 
    autoHeight: false, 
    animated: 'swing' 
}); 

爲了做到這一點，我發現我需要使用刷新手風琴如下：

$('.accordion').accordion("refresh"); 

我的問題是，當我嘗試使用刷新內部手風琴：

$('.child-accordion').accordion("refresh"); 

我得到如下： 錯誤：不能調用手風琴方法在初始化之前;試圖調用方法「刷新」

當我檢查應刷新它具有以下IDS /班格：

DIV#shelf0sections.child-accordion.ui-accordion-content.ui-helper-reset.ui-... 

我使用選擇嘗試：

$('#shelf0sections .child-accordion').accordion("refresh"); 

，而不是其不會給出錯誤，但視覺上沒有任何反應。 （請注意，列表中的第一個元素僅僅是一個示例，用於查看嵌套的手風琴的工作情況，如果嘗試向其中添加節，它將不起作用，請使用'+ Shelf'按鈕，然後打開新的手風琴並使用'+部分'按鈕。）

Answer 1

更多模塊化方法如何？

小提琴或者它沒有發生：http://jsfiddle.net/Varinder/24hsd/1/

說明

的想法是（同）創建與連接和DOM中的某個地方附加正確的事件飛一個全新的手風琴元素。

它通常在DOM中的某個位置抽象出中繼器HTML標記，並使用JS引用它，而不是從字符串構建它。

繼承人在標記手風琴模板：

<div class="template"> 
    <div class="accordion"> 
     <h3 class="accordion-title">accordion title</h3> 
     <div class="accordion-content"> 
      accordion content 
     </div> 
    </div> 
</div> 

繼承人的完整的HTML標記 - 以防萬一：

<div class="page"> 
</div> 

<div id="addShelf" class="button">+ Shelf</div> 
<div id="addSection" class="button">+ Section</div> 

<div class="template"> 
    <div class="accordion"> 
     <h3 class="accordion-title">accordion title</h3> 
     <div class="accordion-content"> 
      accordion content 
     </div> 
    </div> 
</div> 

JS

通過存儲不同的手風琴結構出發：

var shelfConfig = { 
    collapsible: true, 
    autoHeight: false, 
    animated: "swing", 
    heightStyle: "content" 
} 

var shelfSectionConfig = { 
    active:false, 
    collapsible: true, 
    autoHeight: false, 
    animated: "swing" 
} 

Kepping軌道電流手風琴號和當前手風琴節數（最後手風琴內段數） - 可能會派上用場，如果你需要一個功能來刪除一個手風琴貨架

var currentShelfNumber = 0; 
var currentShelfSectionNumber = 0; 

Chaching DOM元素，通知參考tempalte DIV

var $page = $(".page"); 
var $accordionTemplate = $(".template").children(); 

var $addSection = $("#addSection"); 
var $addShelf = $("#addShelf"); 

創建一個輔助函數，單純從DOM返回手風琴模板的克隆副本

function getAccordionTemplate() { 
    return $accordionTemplate.clone(); 
} 

主要功能generateAccordion - 它需要兩個參數，accordionNumber來追加標題等當前數字和accordionType找出使用哪個手風琴配置。

有了這些參數，它會返回一個品牌打屁股新的手風琴附有相應的事件，然後可以調用追加到DOM

function generateAccordion(number, accordionType) { 
    var $accordion = getAccordionTemplate(); 
    var accordionTitle = "twerking bieber?"; 

    if (accordionType == "shelf") { 
     accordionTitle = "Shelf " + number;  
    } else { 
     accordionTitle = "Shelf Section"; 
    } 

    $accordion.find("h3").text(accordionTitle); 

    var $accordionWithEvents = attachAccordionEvents($accordion, accordionType); 

    return $accordionWithEvents; 
} 

通知到另一個功能attachAccordionEvents顧名思義 - 這傢伙將把活動附加到手風琴元素上。

function attachAccordionEvents($accordionElement, accordionType) { 
    if (accordionType == "shelf") { 
     $accordionElement.accordion(shelfConfig); 
    } else { 
     $accordionElement.accordion(shelfSectionConfig);  
    } 

    return $accordionElement; 
} 

另一個輔助功能，確保「添加欄目」按鈕犯規顯示如果沒有手風琴貨架它在

function manageSectionButton() { 
    if ($page.children().length > 0) { 
     $addSection.show(); 
    } else { 
     $addSection.hide(); 
    } 
} 

Finaly活動和邏輯工作：

$addShelf.on("click", function(e) { 
    e.preventDefault(); 

    var newShelfNumber = currentShelfNumber + 1; 
    var $shelfElement = generateAccordion(newShelfNumber, "shelf"); 

    currentShelfNumber = newShelfNumber; 

    $page.append($shelfElement); 


    manageSectionButton(); 
}); 

$addSection.on("click", function(e) { 
    e.preventDefault(); 

    var newShelfSectionNumber = currentShelfSectionNumber + 1; 
    var $shelfSectionElement = generateAccordion(newShelfSectionNumber, "section"); 
    var $activeShelfElement = $page.children().last().find(".accordion-content"); 

    $activeShelfElement.append($shelfSectionElement); 
}); 

......這就是它。

希望這有助於

乾杯