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模式通过ajax填充。内容是由bootstrap插件Collapse制作的Accordion。如果我尝试检测hidden.bs.collapse（或任何其他事件可检测），不会被解雇。

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">&times;</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（通过ajax加载）

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

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);
})

推荐答案

你正试图在DOM中存在.panel类的任何元素之前，使用.panel类将事件侦听器附加到元素。

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.

要使代码正常工作，可以移动<在.panels实际插入DOM之后，在AJAX成功回调中的code> $（'。panel'）。on（...）。或者，也许最好是，您可以改为使用事件委托：

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);
});

请参阅 jQuery文档。

相关摘录：

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。要确保元素存在且可以选择，请将脚本放在HTML标记中的元素之后，或者在文档就绪处理程序中执行事件绑定。或者，使用委派事件来附加事件处理程序。

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屋！