동적으로 생성 된 중첩 아코디언의 자식 새로 고침

Question

사용자가 단추를 클릭 할 때 동적으로 중첩 된 아코디언에 항목을 추가하려고합니다.

는

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

내 문제가 있다는 것입니다 :

이 작업을 수행하기 위해

$(".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' 
}); 

, 나는 다음과 같은 사용하여 아코디언을 새로 고쳐야 것으로 나타났습니다 : 나는 중첩 아코디언을 만들려면 다음 코드를 사용하고 내가 사용 내부 아코디언을 다시 시도 할 때 :

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

내가 얻을 다음 오류 : 아코디언의 메소드를 호출 할 수 없습니다 초기화와 이전;

방법 '새로 고침'을 호출하려고 나는 다음과 같은 IDS/클래스가 갱신되어야 DIV 검사 할 때 :

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

내가 선택하여 시도 : 대신

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

을 오류는 발생하지 않지만 시각적으로 아무 것도 발생하지 않습니다.

jsFiddle : http://jsfiddle.net/Mw9SA/3/ (목록의 첫 번째 요소는 당신이 그것에 섹션을 추가하려고하면, 그것은 작동하지 않습니다, 중첩 된 아코디언 작업을보고 그냥 예입니다 참고 '+ 선반'버튼을 사용합니다. 그런 다음 새로운 아코디언을 열고 '+ 섹션'버튼을 사용하십시오.)

Answer 1

좀 더 모듈화 된 접근 방법은 어떻습니까?

바이올린 또는 일이 didnt는 : http://jsfiddle.net/Varinder/24hsd/1/

설명

아이디어가 부착되어 DOM 어딘가에 추가 올바른 이벤트와 즉석에서 새로운 아코디언 요소를 만들 수 (동일)입니다.

리피터 HTML 마크 업을 DOM 어딘가의 template에 추상화하고 JS를 사용하여이를 문자열로 구성하는 대신 참조하는 것이 일반적으로 더 관리하기 쉽습니다.

Heres는 마크 업에서 아코디언 템플릿 :

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

Heres는 전체 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 요소를 제거하는 기능이 필요한 경우 유용하게 사용할 수있는, 단순히 DOM에서 아코디언 템플릿의 복제 된 복사본을 반환하는 도우미 함수를 만들기 tempalte 사업부

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

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

에게 통지 참조

,536,

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

주 기능 generateAccordion - 두 개의 인수, 즉 제목 등에 현재 숫자를 추가하는 경우 accordionNumber, 사용하려는 아코디언 구성을 확인하는 경우 accordionType이 필요합니다. 그 다음 이름으로 다른 함수 attachAccordionEvents에 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; 
} 

주의에 전화를 추가 할 수 있습니다 부착 적절한 이벤트와 브랜드 때리기 새로운 아코디언을 반환하는 매개 변수와 함께

는 제안 -이 녀석을 아코디언 요소에 이벤트를 첨부합니다.

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(); 
    } 
} 

마침내 이벤트와 논리를 작동하려면 더 아코디언 선반이없는 경우 버튼이 표시 나던 "섹션을 추가"확실하게 또 다른 도우미 함수 :

$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); 
}); 

... 그리고 그것에 대해. 이 도움이

희망,

건배