- 首页
- 前端开发
- Bootstrap 3 - 如果手风琴位于通过 ajax 填充的模式内，则不会触发 hidden.bs.collapse 事件
Bootstrap 3 - 如果手风琴位于通过 ajax 填充的模式内，则不会触发 hidden.bs.collapse 事件
[英] Bootstrap 3 - Event hidden.bs.collapse not fired if the accordion is inside a modal populated via ajax
本文介绍了Bootstrap 3 - 如果手风琴位于通过 ajax 填充的模式内，则不会触发 hidden.bs.collapse 事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个通过 ajax 填充的简单引导模式.内容是由 bootstrap 插件 Collapse 制作的 Accordion.如果我尝试检测 hidden.bs.collapse(或任何其他可检测事件)，它不会被解雇.
http://jsfiddle.net/Diac/n2jm5cy8/
HTML
<a href="/echo/html/" data-remote="false" data-toggle="modal" data-target="#myModal">启动演示模式</a><!-- 模态--><div class="modalfade" 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><h4 class="modal-title" id="myModalLabel">模态标题</h4>
<div class="modal-body" id="modalbody">
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>
accordion.html(通过ajax加载)
<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>
<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 offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.
JavaScript
$('a[data-toggle]').click(function(e) {e.preventDefault();});$('#myModal').on('show.bs.modal', function(event) {$.ajax({网址:手风琴.html"，成功:函数(响应文本){$("#modalbody").html(responseText);}});});$('.panel').on('hidden.bs.collapse', function (e) {alert('事件触发#' + e.currentTarget.id);})
解决方案
在 DOM 中存在任何具有 .panel 类的元素之前，您试图将事件侦听器附加到具有 .panel 类的元素.
为了使您的代码工作，您可以在 .panels 实际插入到DOM.或者，您可能最好使用事件委托:
$('#modalbody').on('hidden.bs.collapse', '.panel', function (e) {alert('事件触发#' + e.currentTarget.id);});
请参阅 jQuery 文档中有关事件委托的讨论.
相关摘录:
<块引用>事件处理程序只绑定到当前选中的元素；它们必须在您的代码调用 .on() 时存在.为了确保元素存在并且可以被选择，在 HTML 标记中的元素之后放置脚本或在文档就绪处理程序中执行事件绑定.或者，使用委托事件来附加事件处理程序.
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.
http://jsfiddle.net/Diac/n2jm5cy8/
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)
<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
$('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);
})
解决方案
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.
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:
$('#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.
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.
这篇关于Bootstrap 3 - 如果手风琴位于通过 ajax 填充的模式内，则不会触发 hidden.bs.collapse 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
