如何使用ajax使Twitter Bootstrap Collapse在动态加载的html上工作

我正在使用ajax调用加载html，这个html有Bootstrap Collapse 。 问题是折叠不起作用 ，如果你点击它将会扩展，但它不会再次崩溃。

为了检查我是否做错了，我将相同的代码放在静态页面上（不使用ajax加载）并且它工作正常。 因此它似乎仅与动态加载的html有关。

我尝试手动启用折叠使用

$(".collapse").collapse() 

但仍然是同一个问题。

我想我需要使用jquery的live() / on()方法，因为html是动态的，但不知道如何调用$(".collapse").collapse()因为我觉得它只适用于事件还是我需要做的其他事情？

Answer 1

我建议你打电话

  $(".collapse").collapse() 

在附加动态html之后，在ajax的成功函数内部。

Answer 2

我的解决方案是：

  $('.collapse').on('show', function () { var $this = $(this); if($this.attr('data-href')) { $this.html($.getJSON($this.attr('data-href'),function(data){ $this.html(data.html); $this.removeAttr('style'); })); } }) 

Answer 3

只需在ajax成功事件上执行此操作即可。

 $('[data-toggle="collapse"]').click(function(e){ e.preventDefault(); var target_element= $(this).attr("href"); $(target_element).collapse('toggle'); return false; });