javascript - 具有内部所示 Accordion 的自举式 Accordion ，具有不同的所示bs.collapse事件

我有一个带有内部手风琴的自举手风琴。我遇到的问题是，当我单击内部手风琴时，会触发外部手风琴绑定到的“ shown.bs.collapse”事件，这种情况不应该发生，我想绑定内部面板到它自己的show.bs.collapse事件，如果可能的话？

为了给您一个更好的主意，我有以下几点：

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

    GetData(param1, param2);
})

GetData是一个函数，它执行ajax调用并将内部手风琴附加到外部手风琴。外部手风琴ID为#accordion。效果很好，但是当我单击内部手风琴时，我给它赋予了ID＃accordion2，上面的代码被再次调用。有人可以指出正确的方向吗？

为了更好地理解手风琴的结构...我有一个带有以下内容的mvc视图：-

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

    </div>

然后，我通过javascript函数动态构建其余部分。以下功能创建外部手风琴面板：

函数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>');

        });
    }
});

}

在“ shown.bs.collapse”中调用的GetData函数如下所示：

函数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>');

        });
    }
});

}

现在，当我尝试将＃accordion2绑定到它自己的事件时，没有触发它，而是触发了#accordion之一。有什么想法吗？

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

    console.log('test2');
})

最佳答案

由于您的#accordion2是动态添加的，因此在这里需要event delegation之类的东西，因此您可能需要使用以下代码：

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

您可以将$(document)替换为element上某个最近的父级#accordion2，该父级存在于page load上，并且不会通过ajax加载