如何动态创建jQuery Mobile中动态创建的可折叠集合

我目前正在创建一个应用程序，它从服务器接收数据，然后动态创建可折叠元素。现在我有代码，允许在整个应用程序的塌缩元件的开启和关闭的动画：如何动态创建jQuery Mobile中动态创建的可折叠集合

$('[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。有没有办法阻止儿童可折叠的做法？

来源

2013-07-02 user481610

活动代表团，我的朋友。您必须将该元素绑定到静态父级或对象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.

来源

2013-07-02 18:47:14 krishgopinath

谢谢你这么好的答案的优惠！我只是想问，如果我有多个可折叠套件，我将如何获得与每个可折叠套件对应的事件？例如，如果我有一个可折叠的另一个应该我关闭我关闭可折叠设置它也最终关闭父可折叠 – user481610

不明白为什么不..为它必须工作 – krishgopinath

事件适用于父和子可折叠只是儿童事件影响家长。例如，如果我关闭一个可折叠的孩子，它最终会关闭父母。无论如何解决这个问题？ – user481610

你就不能添加代表团

？

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

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

来源

2013-07-02 18:52:09 jeschafe

的修复程序只需改变“孩子”为“孩子”，这样只用一个“代”

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

来源

2013-07-12 06:52:06

如何动态创建jQuery Mobile中动态创建的可折叠集合

回答

相关问题