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。有什么方法可以阻止儿童可折叠者这样做吗？

Answer 1

活动代表团，我的朋友。您必须将该元素绑定到静态父级或document对象。如果您正在动态添加可折叠，则将事件添加到在该特定时间点不存在的元素是没有意义的。这里的方法是将expand和collapse事件添加到直接父级（已存在于pagechange（或更确切地说使用pageshow）或将其添加到{ {1}}始终存在，如下所示：

document

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

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

More info in docs.

Answer 2

你不能只添加委托吗？

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

这只是意味着[数据角色.....的每个匹配都会被触发，因为身体实际上有事件，它基本上将它发送给孩子。

Answer 3

修复只是将“孩子”改为“孩子”，这样它只处理一个“代”

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

如何在jQuery Mobile中为动态创建的可折叠集设置动画

3 个答案: