如何正确附加动态GetUIKit手风琴? [英] How to correctly append dynamic GetUIKit accordions?

问题描述

我正在尝试动态将 UIKit手风琴附加到可排序的列表.最初的项目(手风琴)有效，但动态附加的内容无效.

I'm trying to dynamically append UIKit Accordions into a sortable list. The initial items (accordions) are working, but the dynamically appended is not working.

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

这是我为重现该问题而创建的最小示例.可排序的动态项目运行良好(可以拖动)，但手风琴却不能.单击它时，我得到:

This is the minimal example I created to reproduce the problem. The sortable dynamic item is working fine (can be dragged), but the accordion doesn't. When clicking it, I'm getting:

Uncaught TypeError: Cannot read property 'data' of undefined

我尝试过的事情:

• 在可排序元素中使用data-uk-observe.我觉得使用它没什么不同.

• Using data-uk-observe in the sortable element. I don't feel any difference using it.

尝试使用UIKit API初始化手风琴:

Trying to initialize the accordion using the UIKit API:

UIkit.accordion($(".uk-margin"));
UIkit.accordion($(".uk-accordion-title"));
UIkit.accordion($(".uk-accordion-content"));

这些都不能解决问题.

那么，如何正确附加动态GetUIKit手风琴?

So, how to correctly append dynamic GetUIKit accordions?

JSFIDDLE

推荐答案

您似乎要执行的操作是:

It looks like what you want to do is:

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

• Omit the data-uk-accordion attribute.
• Save the object returned from calling UIkit.accordion(element, options).
• After new accordion child elements have been added, call accordion.update(). (assuming you saved the returned object above in a variable called accordion)

有关我如何达到此目的的更多信息，请查看 GitHub上的相关问题.

For more information about how I arrived at that, check out the related issue on GitHub.

(也作为答案发布在 UIKit手风琴和ng -repeat不起作用)

这篇关于如何正确附加动态GetUIKit手风琴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！