为什么JavaScript代码在注入Bootstrap 4 Modal时未加载？ [英] Why is javascript code not loaded when injectet into Bootstrap 4 Modal?
问题描述
function showModal（message，headerMessage，sticky，noFooter）我有一个JavaScript函数可以打开Bootstrap模式对话框： {
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 =buttonclass =closedata-dismiss =modalaria- 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 =buttonclass =btn btn-primarydata-dismiss =modalaria-hidden =true>确定< / button>'）;
modalContent.append（footer）;
}
var options = {};
options.show = true;
if（sticky == true）{
options.backdrop =static;
}
modal.modal（options）;
返回模态;
};
在下一步中，我要从服务器加载一个HTML代码片段，作为消息的 showModal（）函数。下面是一个通过ajax从服务器加载并存储在JS变量 mySnip 中的示例代码片段
< p> Foo文字< / p>
< script type =text / javascript>
alert（Alert1）;
$（document）.ready（function（）{
alert（Alert2）;
}）;
< / script>
之后，我打开装载了片段作为参数的Modal-Dialog：
showModal（mySnip，Header，true，false）;
我的问题是，代码段的Javascript部分未加载。
是否有人知道我如何获得执行代码段的Javascript？ （以便显示提醒）
背景：
从Bootstrap 2迁移到Bootstrap 4.这种方法在Bootstrap 2中工作得很好。我知道这可以通过其他方式实现，但我正在迁移一个大型应用程序，其中有几十个以这种方式工作的Modals。 p>
我想我找到了一个解决方案。这更多的是jQuery而不是Bootstrap的问题。 jQuery完全不执行< script> -Tags的内容。在返回语句之前，我将它添加到了 showModal（...）函数的底部：
<$ p $ （消息）{
var reponseScript = $（message）.filter（script）;
$ .each（reponseScript，function（idx，val）{
eval（val.text）;
}）;
}
$（body）.trigger（'load'）;
...
它做什么：它从服务器响应中筛选javascript 。然后用 eval 执行。
$ b
$（body）.trigger（' load'）; 执行注入的 ready（）函数中的代码。我仍然需要再测试一下。我担心，其他 ready（）方法也会再次被调用。
$ p $ lt; code> therapy.showModal = function（message，headerMessage，sticky，noFooter）$ c $ showModal ）{
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 =buttonclass =closedata-dismiss =modalaria- 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 =buttonclass =btn btn-primarydata-dismiss =modalaria-hidden =true>确定< / button>'）;
modalContent.append（footer）;
}
var options = {};
options.show = true;
if（sticky == true）{
options.backdrop =static;
}
modal.modal（options）;
//$(modal).trigger('load'）;
//获取javascript（如果有）并执行...
//请参阅：https://stackoverflow.com/a/7330106/1219104
if（message）{
var reponseScript = $（message）.filter（script）;
$ .each（reponseScript，function（idx，val）{
eval（val.text）;
}）;
}
$（body）.trigger（'load'）;
返回模态;
};
I have a javascript function which opens a Bootstrap Modal Dialog:
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 = " ";
header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">×</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;
};
In the next step I'm loading a HTML snippet from the server, which I want to pass into the showModal() Function as message. Here is an example snippet loaded from server via ajax and stored in the JS-Variable mySnip
<p>Foo text</p>
<script type="text/javascript" >
alert("Alert1");
$(document).ready(function(){
alert("Alert2");
});
</script>
After that I open the Modal-Dialog with the loaded with the snippet as parameter:
showModal(mySnip, "Header", true, false);
My problem is, that the Javascript part of the snippet is not loaded. Does anybody know how I can get the Javascript of the snippet executed? (So that the Alerts are shown)
Background:
I'm migrating from Bootstrap 2 to Bootstrap 4. This method worked perfectly fine in Bootstrap 2. I know that this can be achieved in an other way, but I'm migrating a big application with dozens of Modals which are working in this way.
i think I found a solution. This is more a problem of jQuery and not Bootstrap. jQuery is simply not executing the content of <script>-Tags anymore. I added this to the bottom of my showModal(...) function right before the return statement:
...
if(message){
var reponseScript = $(message).filter("script");
$.each(reponseScript, function(idx, val) {
eval(val.text);
} );
}
$(body).trigger('load');
...
What does it do: It filters the javascript from the server-response. After that it's executed with eval.
The $(body).trigger('load'); executes the code within the injected ready()-function. I still have to test it a little more. I'm afraid, that other ready() methods are also called again.
Here my full showModal Function:
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 = " ";
header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">×</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: https://stackoverflow.com/a/7330106/1219104
if(message){
var reponseScript = $(message).filter("script");
$.each(reponseScript, function(idx, val) {
eval(val.text);
} );
}
$(body).trigger('load');
return modal;
};
这篇关于为什么JavaScript代码在注入Bootstrap 4 Modal时未加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
