Javascript 刷新动态创建的嵌套手风琴中的子项

我试图在用户单击按钮时动态地将项目附加到嵌套的手风琴。我正在使用以下代码创建嵌套手风琴：

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

我得到以下信息： 错误：无法在初始化之前调用accordion上的方法；试图调用方法“刷新”

当我检查应该刷新的div时，它具有以下id/类：

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

我尝试使用选择器：

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

相反，它不会给出一个错误，但是视觉上什么也不会发生

jsFiddle：

---

（请注意，列表中的第一个元素只是一个示例，可以看到嵌套的accordion正在工作，如果您尝试向其中添加部分，它将不起作用。请使用“+Shelf”按钮，然后打开新的accordion并使用“+Section”按钮。）

更模块化的方法如何

小提琴，否则它就不会发生：

解释

想法是（同样的）在飞行中创建一个全新的手风琴元素，并在DOM中的某个位置附加正确的事件

通常，将repeater

HTML

标记抽象到DOM中的某个

模板中，并使用JS引用它，而不是从字符串构建它，这样更易于管理

以下是标记中的手风琴模板：

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

打开当前手风琴编号和当前手风琴节号（最后一个手风琴内的节数）的曲目-如果您需要一个功能来移除手风琴架，可能会很方便

var currentShelfNumber = 0;
var currentShelfSectionNumber = 0;

更改DOM元素时，请注意对
tempalte
div的引用

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

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

创建一个助手函数，该函数仅从DOM返回accordion模板的克隆副本

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
，顾名思义-这个家伙会将事件附加到accordion元素

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

。。。就这样

希望这有帮助

干杯
Hey@b-en，你想在代码中的什么地方调用
$（“.child accordion”）.accordion（“刷新”）
也许可以快速检查一下
refresh
调用是否在
var child=$（“.child accordion”）.accordion（{…}）之前进行位？嗨@Varinder，在我尝试刷新之前，我确信元素存在。例如，如果我在创建元素后在控制台中键入，我仍然会进入$（'.child accordion'）.accordion（“refresh”）；20:23:01.853错误：初始化前无法调用accordion上的方法；尝试调用方法“refresh”，但如果调用以下方法，则该方法工作正常：20:23:06.048$（“.child accordion”）.fadeOut（“slow”）；可以在这里发布一个快速的提琴吗？这里：，感谢您的关注。还要注意，列表中的第一个元素只是一个示例，可以看到嵌套的手风琴工作，如果您尝试添加部分，它将不起作用。哇，这太神奇了！非常感谢你的帮助。正如您可能知道的，我对web开发还不熟悉，所以我非常感谢您的详细回答和解释！我将在重构代码后向您报告。再次感谢你！我浏览了我的代码，最后使用了很多你建议的东西。唯一的区别是，我希望所有的元素都属于同一个手风琴，这样我就可以使用.accordio（“选项”，“活动”），并且一次只能打开一个。为了实现这一点，我从模板中删除了外部div，以便只应用手风琴h3&div。再次感谢你，你真的帮助了我，我的代码现在变得更有意义了。
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 );
});