bootstrap accordions with inner accordion with different shown.bs.collapse events

Question

I have a bootstrap accordion which has an inner accordion. The issue I'm encountering is that when i click on the inner accordion the 'shown.bs.collapse' event which the outer accordion is binded to is being triggered which shouldnt be the case, and i would like to have the inner panel binded to its own shown.bs.collapse event if that is possible?

To give you a better idea I have the following:-

$('#accordion').on('shown.bs.collapse', function (e) {

    GetData(param1, param2);
})

The GetData is aa function which does an ajax call and appends an inner accordion to the outer accordion. The outer accordion id is #accordion. That works fine, however when i click on the inner accordion which i gave it an id of #accordion2, the above code is being called again. Can someone please point me in right direction?

To better understand the structure of the accordion...I have an mvc view with the following:-

    <div id="accordion" class="panel-group accordion" style="margin-top:20px">

    </div>

Then i construct the rest dynamically through javascript functions. The following function creates the outer accordion panels:

function GetGroups() {

$.ajax({
    url: url,
    dataType: "JSON",
    contentType: "application/json; charset=utf-8",
    success: function (data) {

        $.each(data.data, function (index, item) {

            var collapseContainer = 'collapse' + accordingIndexes[index];
            var mkContainer = 'testContainer' + index;

            $("#accordion").append('<div class="panel panel-default">\
        <div class="panel-heading ">\
            <h4 class="panel-title">\
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"  href="#' + collapseContainer + '">'
                   + item.Name + ' - ' + item.Value +
                '</a>\
            </h4>\
        </div>\
        <div id="' + collapseContainer + '" class="panel-collapse collapse">\
            <div id="' + mkContainer + '" class="panel-body border-red" data-source-id="' + item.Id + '">\
            </div>\
        </div>\
    </div>');

        });
    }
});

}

and the GetData function which is called in 'shown.bs.collapse' looks like this:

function GetData(testContainer) {

$.ajax({
    url: url,
    dataType: "JSON",
    contentType: "application/json; charset=utf-8",
    success: function (data) {

        $.each(data.data, function (index, item) {

            var collapseContainer = 'collapseInner' + accordingIndexes[index];

            $("#" + testContainer).append('<div class="accordion-inner">\
                <div class="accordion" id="accordion2">\
                <div class="panel panel-default">\
        <div class="panel-heading ">\
            <h4 class="panel-title">\
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-source-id="' + item.Id + '" href="#' + collapseContainer + '">'
                   + item.SourceName + 
                '</a>\
            </h4>\
        </div>\
        <div id="' + collapseContainer + '" class="panel-collapse collapse">\
            <div class="panel-body border-red">\
                    TEST\
            </div>\
        </div>\
    </div>\
    </div>\
    </div>');

        });
    }
});

}

Now when i tried binding #accordion2 to its own event, it was not triggered, the one of #accordion was triggered. Any ideas please?

$('#accordion2').on('shown.bs.collapse', function (e) {

    console.log('test2');
})

Answer 1

Since your #accordion2 was added dynamically, you need something called event delegation here, and so you might need to use below code:

$(document).on('shown.bs.collapse', '#accordion2', function (e) {
  console.log('test2');
})

You can replace $(document) with some nearest parent element of #accordion2 which exists on page load and is not loaded through ajax