javascript - Bootstrap Accordion 与内部 Accordion 与不同的 shown.bs.collapse 事件

Question

我有一个 Bootstrap Accordion ，它有一个内部 Accordion 。我遇到的问题是，当我单击内部 Accordion 时，外部 Accordion 绑定(bind)的“shown.bs.collapse”事件被触发，但事实不应该如此，我希望绑定(bind)内部面板如果可能的话，到它自己的 shown.bs.collapse 事件？

为了让您有更好的想法，我有以下内容:-

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

    GetData(param1, param2);
})

GetData 是一个执行 ajax 调用并将内部折叠面板附加到外部折叠面板的函数。外部 Accordion id 是#accordion。效果很好，但是当我单击内部 Accordion (我给它指定了 #accordion2 id)时，上面的代码将再次被调用。有人可以指出我正确的方向吗？

为了更好地理解 Accordion 的结构...我有一个包含以下内容的 mvc View :-

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

    </div>

然后我通过 JavaScript 函数动态构造其余部分。以下函数创建外部 Accordion 面板:

函数 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 绑定(bind)到它自己的事件时，它没有被触发，而是触发了 #accordion 的事件。请问有什么想法吗？

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

    console.log('test2');
})

Answer 1

由于您的 #accordion2 是动态添加的，因此您需要名为 event delegation 的东西。 在这里，所以您可能需要使用以下代码:

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

您可以将 $(document) 替换为#accordion2 的一些最近的父元素，该元素存在于页面加载 并且不是通过 ajax

加载的