如何在jQueryMobile中动态创建可折叠集的动画

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%奏效。儿童可折叠物品的事件最终会影响家长可折叠物品，这可以在这里看到。有什么办法可以阻止孩子们这样做吗？

Answer 1

活动委托，我的朋友。您必须将该元素绑定到静态父对象或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"]');

文档中的更多信息。

Answer 2

您不能直接添加委派吗？

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

这意味着每个匹配的[data role…..都会被触发，因为主体实际上有事件，它基本上只是把它发送给子对象。

Answer 3

修复方法是简单地将"children"更改为"child"，以便只处理一个"generation"

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