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

Question

我正在使用ajax调用加载html，这个html具有Bootstrap Collapse。问题是折叠不起作用，如果单击它会展开，但它不会再次折叠。

为了检查我是否做错了什么，我将相同的代码放在静态页面上（未使用 ajax 加载），它工作正常。因此，它似乎只有动态加载的html才有问题。

我尝试使用

$(".collapse").collapse() 

但仍然是同样的问题。

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

Answer 1

我建议你打电话

 $(".collapse").collapse() 

在 Ajax 的成功函数中，在附加动态 HTML 之后。

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;
});