[英]bootstrap accordions with inner accordion with different shown.bs.collapse events
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?
我遇到的问题是,当我单击内部手风琴时,会触发外部手风琴绑定到的“ shown.bs.collapse”事件,这种情况不应该发生,我想绑定内部面板到它自己的show.bs.collapse事件,如果可能的话?
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. GetData是一个执行ajax调用并将内部手风琴附加到外部手风琴的函数。 The outer accordion id is #accordion.
外部手风琴ID为#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.
效果很好,但是当我单击内部手风琴时,我给它赋予了ID#accordion2,上面的代码被再次调用。 Can someone please point me in right direction?
有人可以指出正确的方向吗?
To better understand the structure of the accordion...I have an mvc view with the following:- 为了更好地理解手风琴的结构...我有一个带有以下内容的mvc视图:-
<div id="accordion" class="panel-group accordion" style="margin-top:20px">
</div>
Then i construct the rest dynamically through javascript functions. 然后,我通过javascript函数动态构建其余部分。 The following function creates the outer accordion panels:
以下功能创建外部手风琴面板:
function GetGroups() { 函数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: 在“ shown.bs.collapse”中调用的GetData函数如下所示:
function GetData(testContainer) { 函数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. 现在,当我尝试将#accordion2绑定到它自己的事件时,没有触发它,而是触发了#accordion之一。 Any ideas please?
有什么想法吗?
$('#accordion2').on('shown.bs.collapse', function (e) {
console.log('test2');
})
Since your #accordion2
was added dynamically, you need something called event delegation
here, and so you might need to use below code: 由于
#accordion2
是动态添加的,因此您在这里需要一个称为event delegation
东西,因此您可能需要使用以下代码:
$(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
您可以将
$(document)
替换$(document)
#accordion2
某个最接近的父element
,该element
在page load
时就存在,并且不会通过ajax
加载
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.