Как заставить Twitter Bootstrap Collapse работать на динамически загружаемом html с помощью ajax

я загружаю HTML с помощью ajax вызов, этот html имеет Крах Загрузочный. Вопрос коллапс не работает, если вы нажмете, он будет расширяться, но он не будет сворачиваться снова.

чтобы проверить, делаю ли я что-то неправильно, я помещаю тот же код на статическую страницу (не загружается с помощью ajax), и он работает нормально. Поэтому его проблема кажется только с динамически загруженным html.

Я попытался вручную включить свернуть, используя 

$(".collapse").collapse()

но все тот же вопрос.

думаю, мне нужно использовать jQuery live() / on() методы, потому что html является динамическим, но не уверен, как это сделать для вызова $(".collapse").collapse() потому что я думаю, что это работает только на событиях или это что-то еще, что мне нужно сделать ?

9
jquery twitter-bootstrap

3 ответов

Я бы посоветовал вам позвонить

 $(".collapse").collapse()

внутри функции успеха ajax после добавления динамического html.

5

мое решение такое:

    $('.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');
        }));
    }
    })
3

просто выполните это на событии успеха ajax.

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