我有一个带有内部手风琴的自举手风琴。我遇到的问题是,当我点击内部手风琴时,外部手风琴被绑定到的'shown.bs.collapse'事件被触发,这不应该是这种情况,我想让内部面板绑定如果有可能,自己显示.bs.collapse事件?
为了让您更好地了解我有以下内容: -
$('#accordion').on('shown.bs.collapse', function (e) {
GetData(param1, param2);
})
GetData是一个执行ajax调用并将内部手风琴附加到外部手风琴的函数。外面的手风琴id是#accordion。这工作正常,但是当我点击内部手风琴时,我给它一个#accordion2的id,上面的代码再次被调用。有人可以指点我正确的方向吗?
为了更好地理解手风琴的结构...我有一个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');
})
答案 0 :(得分:1)
由于您#accordion2
是动态添加的,因此您需要在此处使用名为 event delegation
的内容,因此您可能需要使用以下代码:
$(document).on('shown.bs.collapse', '#accordion2', function (e) {
console.log('test2');
})
您可以将$(document)
替换为element
上#accordion2
的{{1}}最近的父page load
,并且不会通过ajax
加载