我正在尝试将UIKit Accordions动态附加到可排序列表中。初始项目(手风琴)正在工作,但动态附加的项目不起作用。
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">×</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">×</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">×</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-margin")); UIkit.accordion($(".uk-accordion-title")); UIkit.accordion($(".uk-accordion-content"));
这些都不能解决问题。
那么,如何正确附加动态 GetUIKit 手风琴呢?