Bootstrap Collapse not working with Ajax created content

0
votes

I'm using Ajax to get some [data] that's used to set attributes within a cloned div. Within this div is a bootstrap accordion:

<div class='accordion-toggle' data-toggle='collapse' data-target='' style='cursor: pointer;'>
...
</div>

<div class="accordion-body collapse" id="">
...
</div>

On successful Ajax call I am setting the data-target and id of the accordion with the data received but collapse is never called. I even try to initiate collapse after cloning. Here is my JQuery:

$.ajax({
            ...
            success: function(data) {
                        var id = data.id;
                        var data_target = '#target_' + id;
                        var inventory = $('#inventory_html').clone().attr('id',id);
                        $('.pick_inventory').append($(inventory_i));

                        $('#' + id).find('.accordion-toggle').attr('data-target',data_target);
                        $('#' + id).find('.accordion-body').attr('id',data_target);

                        $('#' + id).find('.collapse').collapse({toggle: false});
}

When I go to click on the accordion-toggle nothing happens. Any help with this?

1
jqueryajaxtwitter-bootstrapcollapsebootstrap-accordion

1 Answers

0
votes

I found 2 small problems: The inventory variable seemed wrong and the ID for the collapsible div should not have a # in it.

Try:

var id = data.id;
var data_target = 'target_' + id;
var inventory = $('#inventory_html').clone().attr('id', id);
$('.pick_inventory').append(inventory);

$('#' + id).find('.accordion-toggle').attr('data-target', '#' + data_target);
$('#' + id).find('.accordion-body').attr('id', data_target);
$('#' + id).find('.collapse').collapse({ toggle: false });