How to make Twitter Bootstrap Collapse work on dynamically loaded html using ajax

Question

I am loading html using ajax call, this html has Bootstrap Collapse. The issue is Collapse is not working, if you click it wil

Answer 1

My solve is:

    $('.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 2

Just execute this on ajax success event.

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

Answer 3

i would suggest you to call

 $(".collapse").collapse() 

inside the ajax's success function after the dynamic html is appended.