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

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

3 个答案: