jquery - 如何使用 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() 

附加动态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;
});