为什么在注入 Bootstrap 4 Modal 时 javascript 代码没有加载？

Question

我有一个 javascript 函数可以打开一个 Bootstrap 模态对话框：

function showModal(message, headerMessage, sticky, noFooter){
        var modal = $('<div />',{
                class: 'modal fade hide',
                role: "dialog",
                'aria-labelledby': "modalTitle",
                'aria-hidden': "true",
                tabindex: -1
        });

        var modalDialog = $('<div />',{
                class: 'modal-dialog',
                role: "document"
        });
        modal.append(modalDialog);

        var modalContent = $('<div />',{
                class: 'modal-content'
        });
        modalDialog.append(modalContent);



        var header = $('<div />',{
                class: 'modal-header'
        });
        if(headerMessage == undefined) headerMessage = "&nbsp;";
        header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>');
        modalContent.append(header);


        var body = $('<div />',{
                class: 'modal-body'
        });
        body.html(message);
        modalContent.append(body);

        if(noFooter != true){
                var footer = $('<div />', {
                        class: 'modal-footer'
                });
                footer.html('<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>');
                modalContent.append(footer);
        }
        var options = {};
        options.show = true;

        if(sticky == true){
                options.backdrop="static";
        }

        modal.modal(options);
        return modal;
};

在下一步中，我将从服务器加载一个 HTML 片段，我想将其作为消息传递给 showModal() 函数。这是通过 ajax 从服务器加载并存储在 JS 变量 mySnip

中的示例片段

<p>Foo text</p>
<script type="text/javascript" >
   alert("Alert1");
   $(document).ready(function(){
      alert("Alert2");
   });
</script>

之后，我打开模态对话框，其中加载了片段作为参数：

showModal(mySnip, "Header", true, false);

我的问题是，代码段的 Javascript 部分未加载。有谁知道我怎样才能让代码片段的 Javascript 被执行？（以便显示警报）

背景：

我正在从 Bootstrap 2 迁移到 Bootstrap 4。此方法在 Bootstrap 2 中运行得非常好。我知道这可以通过其他方式实现，但是我正在迁移一个大型应用程序，其中包含数十个以这种方式工作的模式。

Answer 1

我想我找到了解决办法。这更多是 jQuery 而不是 Bootstrap 的问题。 jQuery 不再执行 <script>-Tags 的内容。我在 return 语句之前将其添加到 showModal(...) 函数的底部：

...
if(message){
    var reponseScript = $(message).filter("script");
    $.each(reponseScript, function(idx, val) { 
        eval(val.text);
    } );
}
$(body).trigger('load');
...

它的作用：它从 server-response 中过滤 javascript。之后用 eval.

执行

$(body).trigger('load'); 执行注入的 ready() 函数中的代码。我还需要再测试一下。恐怕其他 ready() 方法也被再次调用。

这里是我的完整 showModal 函数：

therapy.showModal = function(message, headerMessage, sticky, noFooter){
        var modal = $('<div />',{
                class: 'modal fade hide',
                role: "dialog",
                'aria-labelledby': "modalTitle",
                'aria-hidden': "true",
                tabindex: -1
        });

        var modalDialog = $('<div />',{
                class: 'modal-dialog',
                role: "document"
        });
        modal.append(modalDialog);

        var modalContent = $('<div />',{
                class: 'modal-content'
        });
        modalDialog.append(modalContent);



        var header = $('<div />',{
                class: 'modal-header'
        });
        if(headerMessage == undefined) headerMessage = "&nbsp;";
        header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>');
        modalContent.append(header);


        var body = $('<div />',{
                class: 'modal-body'
        });
        body.html(message);
        modalContent.append(body);

        if(noFooter != true){
                var footer = $('<div />', {
                        class: 'modal-footer'
                });
                footer.html('<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>');
                modalContent.append(footer);
        }
        var options = {};
        options.show = true;

        if(sticky == true){
                options.backdrop="static";
        }

        modal.modal(options);
        //$(modal).trigger('load');

        // Get javascript if any and execute...
        // see: 
        if(message){
                var reponseScript = $(message).filter("script");
                $.each(reponseScript, function(idx, val) { 
                        eval(val.text);
                } );
        }
        $(body).trigger('load');
        return modal;
};

为什么在注入 Bootstrap 4 Modal 时 javascript 代码没有加载？

Why is javascript code not loaded when injectet into Bootstrap 4 Modal?

javascript

jquery

html

twitter-bootstrap

twitter-bootstrap-4