jquery-mobile - 如何在 jQuery Mobile 中动态创建可折叠集的动画

Question

我目前正在创建一个从服务器接收数据然后动态创建可折叠元素的应用程序。现在我的代码允许在整个应用程序中打开和关闭可折叠元素的动画:

$('[data-role="collapsible"]').bind('expand', function () {
            $(this).children().slideDown(500);
        }).bind('collapse', function () {
            $(this).children().next().slideUp(500);
        });

现在此代码不适用于动态创建的可折叠元素。因此，我尝试做的是以下内容:

$(document).on('pagechange','#resultssearch',
    function()
    {
        $('[data-role="collapsible"]').bind('expand', function () {
            $(this).children().slideDown(500);
        }).bind('collapse', function () {
            $(this).children().next().slideUp(500);
        });

    });

所以在添加了动态可折叠元素的页面上，我尝试添加上述页面事件。但是有些方法似乎也不起作用。我将如何动态生成动画？

如建议的答案所示，有效的代码如下:

$(document).on('expand', '[data-role="collapsible"]', function () {
     $(this).children().slideDown(500);
 }).on('collapse', '[data-role="collapsible"]', function () {
     $(this).children().next().slideUp(500);
 });

这怎么可能不是 100% 有效的。子可折叠的事件最终会影响父可折叠，这可以看到 here .有什么方法可以阻止 child 可折叠设备这样做吗？

Answer 1

事件代表团，我的 friend 。您必须将该元素绑定(bind)到静态父级或 document目的。如果您要动态添加可折叠元素，则将事件添加到在该特定时间点不存在的元素是没有意义的。这里的方法是添加 expand和 collapse事件到直接父级(已经存在于 pagechange (或者更确切地说使用 pageshow )或将其添加到一直存在的 document 中，如下所示:

 $(document).on('expand', '[data-role="collapsible"]', function () {
     $(this).children().slideDown(500);
 }).on('collapse', '[data-role="collapsible"]', function () {
     $(this).children().next().slideUp(500);
 });

或者，简单地说，像这样加入他们:

$(document).on({
    "expand": function () {
        $(this).children().slideDown(500);
    },
    "collapse": function () {
        $(this).children().next().slideUp(500);
    }
}, '[data-role="collapsible"]');

More info in docs.