twitter-bootstrap Bootstrap 3 - 如果手风琴位于通过 ajax 填充的模式内，则不会触发 hidden.bs.collapse 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33131618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Event hidden.bs.collapse not fired if the accordion is inside a modal populated via ajax
提问by Daniele
I have a simple bootstrap modal populated via ajax. The content is an Accordion made by the bootstrap plugin Collapse. If I try to detect the hidden.bs.collapse (or any other Event detectable), it won't be fired.
我有一个通过 ajax 填充的简单引导模式。内容是由 bootstrap 插件 Collapse 制作的 Accordion。如果我尝试检测 hidden.bs.collapse （或任何其他Eventdetectionable ），它将不会被触发。
http://jsfiddle.net/Diac/n2jm5cy8/
http://jsfiddle.net/Diac/n2jm5cy8/
HTML
HTML
<!-- Button trigger modal -->
<a href="/echo/html/" data-remote="false" data-toggle="modal" data-target="#myModal">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="modalbody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
accordion.html (loaded via ajax)
手风琴.html（通过ajax加载）
<div class='panel-group' id='accordion'>
<div class='panel panel-default' id='panel1'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>Collapsible Group Item #1</a>
</h4>
</div>
<div id='collapseOne' class='panel-collapse collapse in'>
<div class='panel-body'> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
</div>
</div>
</div>
JavaScript
JavaScript
$('a[data-toggle]').click(function(e) {
e.preventDefault();
});
$('#myModal').on('show.bs.modal', function(event) {
$.ajax({
url: "accordion.html",
success: function(responseText) {
$("#modalbody").html(responseText);
}
});
});
$('.panel').on('hidden.bs.collapse', function (e) {
alert('Event fired on #' + e.currentTarget.id);
})
回答by Thernys
You are trying to attach your event listener to elements with the .panel class before any elements with the .panel class exist in the DOM.
在 DOM 中存在任何具有 .panel 类的元素之前，您试图将事件侦听器附加到具有 .panel 类的元素。
To make your code work, you can move your $('.panel').on(...)inside the AJAX success callback, after the .panels have actually been inserted to the DOM. Alternatively, and probably preferably, you may use event delegation instead:
为了使您的代码工作，您可以$('.panel').on(...)在 .panels 实际插入到 DOM 之后移动AJAX 成功回调内部。或者，可能最好是，您可以使用事件委托：
$('#modalbody').on('hidden.bs.collapse', '.panel', function (e) {
alert('Event fired on #' + e.currentTarget.id);
});
See the discussion regarding event delegation in the jQuery documentation.
请参阅jQuery 文档中有关事件委托的讨论。
A relevant excerpt:
相关摘录：
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.
事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在。为了确保元素存在并且可以被选择，在 HTML 标记中的元素之后放置脚本或在文档就绪处理程序中执行事件绑定。或者，使用委托事件来附加事件处理程序。
