Javascript show.bs.modal-won'；t在外部加载引导4模式下点火_Javascript_Jquery_Bootstrap 4_Bootstrap Modal

Javascript show.bs.modal-won'；t在外部加载引导4模式下点火

javascript jquery bootstrap-4

Javascript show.bs.modal-won'；t在外部加载引导4模式下点火,javascript,jquery,bootstrap-4,bootstrap-modal,Javascript,Jquery,Bootstrap 4,Bootstrap Modal,我希望能够将公共模式对话框（存储在外部文件中）加载到任何页面中，该页面需要一个模式作为页面的一部分。它似乎大部分工作正常，除了从外部文件加载模式标记时不会触发show.bs.modal或hide.bs.modal事件——但是，如果我在加载外部html时注释掉外部文件标记并直接将外部文件标记复制到页面主体中，则会触发事件在加载模式标记并显示它的页面（index.html）中，我有以下标记 <body> <button type="button" class="btn"

我希望能够将公共模式对话框（存储在外部文件中）加载到任何页面中，该页面需要一个模式作为页面的一部分。它似乎大部分工作正常，除了从外部文件加载模式标记时不会触发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>


开放式外部模态
$（文档）.ready（函数（）{
$（'externalModal'）.load（'modal_dialog_simple.html'）；
//设置处理程序
$（'simpleModelDialog'）。on（'show.bs.modal'，function（）{
log（“显示触发的bs模式事件”）；
});
$（'simpleModelDialog'）。on（'hide.bs.modal'，function（）{
log（'隐藏触发的bs模式事件'）；
});
});

在外部文件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>


简单模态标题
&时代；
提交
接近

提前感谢您的帮助。

您正在加载模式HTML之前添加

show.bs.modal

和

hide.bs.modal

事件侦听器

在jQuery的方法上使用回调函数以确保已加载模式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.');
        });
    });
});

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

附加事件处理程序时，SimpleModelDialog尚未加载。您可以使用事件委派或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.');
});

另一种可能性是在没有的情况下。通过这种方式，您可以将事件处理程序直接附加到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.');
});