I am loading html using ajax call, this html has Bootstrap Collapse . The issue is Collapse is not working , if you click it will expand but it won't collapse again.
To check if I am doing something wrong, I put the same code on a static page (not loaded using ajax) and it works fine. So its seems issue only with dynamically loaded html.
I tried manually enabling Collapse using
$(".collapse").collapse()
but still same issue.
I guess I need to use jquery's live() / on()
methods, because the html is dynamic, but not sure how do I do that for calling $(".collapse").collapse()
because I think it only works on events or is it something else that I need to do ?
i would suggest you to call
$(".collapse").collapse()
inside the ajax's success function after the dynamic html is appended.
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');
}));
}
})
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;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.