如何正确地附加动态GetUIKit手风琴？

Question

我正在尝试将UIKit手风琴动态添加到可排序列表中。最初的项目(手风琴)正在工作，但是动态追加的不工作。。

HTML

<div class="second-list"  data-uk-observe>
    <div class="uk-sortable uk-margin uk-accordion" data-uk-sortable="{group:'test'}" data-uk-accordion="{showfirst: false}">
        <div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">Item 1
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">test1</div>
        </div>
        <div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">Item 2
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">test2</div>
        </div>
    </div>
</div>

JavaScript

// Remove item handler
$(".delete-btn").on("click", function () {
    // 400 is default
    $(this).closest(".uk-margin").fadeOut(400, function () {
        $(this).remove();
    });
    return false;
});

function addItem () {
    var $container = $(".second-list").find("[data-uk-sortable]");
    $container.append(
    `<div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">new item
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">description</div>
        </div>`
    );
}

addItem();

这是我为再现问题而创建的最小示例。可排序的动态项工作正常(可以拖动)，但手风琴不工作。单击它时，我得到：

Uncaught TypeError: Cannot read property 'data' of undefined

我试过的是：

• 在可排序元素中使用data-uk-observe。我不觉得用它有什么不同。
• 尝试使用UIKit API初始化手风琴： UIkit.accordion($($“..uk title”)；UIkit.accordion($($..uk accordion title))；UIkit.accordion($($..uk content content))； 所有这些都解决不了问题。

那么，如何正确地附加动态GetUIKit手风琴呢？

JSFIDDLE

Answer 1

看起来你想做的是：

• 省略data-uk-accordion属性。
• 保存调用UIkit.accordion(element, options)时返回的对象。
• 添加新的手风琴子元素后，调用accordion.update()。(假设您将上面返回的对象保存在一个名为accordion的变量中)

有关我是如何达到这一目标的更多信息，请访问关于GitHub的相关问题。

(也是UIKit手风琴和ng重复不起作用上的一个答案)

Answer 2

在重新初始化元素之前，尝试从元素中移除该数据：

$(".uk-margin").removeData("accordion");
UIkit.accordion($(".uk-margin"));

当我为这个写一个角度指令的时候，它对我有用。

Answer 3

添加后尝试更新手风琴的所有项目，

var component = UIkit.accordion($('.uk-accordion'));
component.update();

对我起作用了。