Question

我希望能够将通用模式对话框（存储在外部文件中）加载到任何页面中，该页面需要模式作为页面的一部分。从外部文件加载模态标记时，无论show.bs.modal或hide.bs.modal事件都不会触发，似乎似乎大部分都可以工作-但是，如果我注释掉外部加载，则事件可以触发html，然后将外部文件标记直接复制到页面主体中。

在页面（index.html）中，该页面加载了模式标记，然后显示它，我有以下标记。

<body>
    <button type="button" class="btn" data-toggle="modal" 
        data-target="#simpleModalDialog" >
         open External Modal
    </button>

    <div id="externalModal" />

    <script>
        $(document).ready(function(){
            $('#externalModal').load('modal_dialog_simple.html');
            // setup handlers
            $('#simpleModalDialog').on('show.bs.modal',function(){
                console.log('show bs modal event triggered');
            });
            $('#simpleModalDialog').on('hide.bs.modal', function(){
                console.log('hide bs modal event triggered.');
            });
        });
    </script>
</body>

在外部文件modal_dialog_simple.html中，标记如下：

<div class="modal fade" id="simpleModalDialog">
    <div class="modal-dialog modal-dialog-centered" >
        <div class="modal-content">            
            <div class="modal-header">
                <h4 id="modal_heading" class="modal-title">
                    Simple Modal Heading
                </h4>
                <button id="modal_close_button" type="button" 
                    class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <input type="text" value="test" id="message"/>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn">Submit</button>
                <button type="button" class="btn btn-secondary" 
                    data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

谢谢您的帮助。

Answer 1

要在加载模式HTML之前添加show.bs.modal和hide.bs.modal事件监听器。

在jQuery的.load方法上使用回调函数以确保已加载模式HTML，然后设置事件侦听器。

$(document).ready(function(){
    $('#externalModal').load('modal_dialog_simple.html', function() {

        // setup handlers
        $('#simpleModalDialog').on('show.bs.modal', function() {
            console.log('show bs modal event triggered');
        });
        $('#simpleModalDialog').on('hide.bs.modal', function() {
            console.log('hide bs modal event triggered.');
        });
    });
});

Answer 2

从外部文件加载模式标记时，不会触发show.bs.modal或hide.bs.modal事件

附加事件处理程序时，尚未加载 simpleModalDialog 。您可以使用事件委托或complete jQuery加载回调。使用事件委托，您可以编写：

$('#externalModal').on('show.bs.modal', '#simpleModalDialog', function(){
      console.log('show bs modal event triggered');
});
$('#externalModal').on('hide.bs.modal', '#simpleModalDialog', function(){
      console.log('hide bs modal event triggered.');
});

如果没有event bubbling，则另一种可能性是stopPropagation。这样，您可以将事件处理程序直接附加到 externalModal 父级：

 $('#externalModal').on('show.bs.modal', function(){
      console.log('show bs modal event triggered');
});
$('#externalModal').on('hide.bs.modal', function(){
      console.log('hide bs modal event triggered.');
});

show.bs.modal不会在外部加载的Bootstrap 4 modal中触发

2 个答案: