4

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

$('[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% 有效的。子可折叠的事件最终会影响父可折叠，这可以在这里看到。有什么方法可以阻止儿童可折叠设备这样做吗？

4

3 回答 3

3

活动代表团，我的朋友。您必须将该元素绑定到静态父级或document对象。如果您要动态添加可折叠元素，则将事件添加到在该特定时间点不存在的元素是没有意义的。这里的方法是将expandandcollapse事件添加到直接父级（已经存在于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"]');

文档中的更多信息。

于 2013-07-02T18:47:14.077 回答
1

你不能只添加代表团吗？

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

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

于 2013-07-02T18:52:09.350 回答
0

解决方法是简单地将“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);
 });
于 2013-07-12T06:52:06.223 回答