HTML中的JavaScript引用未以模态加载

JavaScript reference inside HTML not loading in modal

本文关键字：模态 加载 引用 中的 JavaScript HTML      更新时间：2023-09-26

我有一个主页，我正在加载模式对话框，这些对话框以HTML形式存储在其他部分HTML页面中。我在不同的按钮点击后，将模态动态加载到页面中的1个模态中。

我的模态的部分页面1页如下：

<script type="text/javascript" src="../App/modals.js"></script>
<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">Specify entity name you wish to create</h4>
</div>
<div class="modal-body">
    <div class="row">
        <form>
            <div class="col-md-6">
                <input type="text" id="txtEntityNameCreate" />
            </div>
            <p class="modal-log"></p>
        </form>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary" onclick="AddEntity()">Create Entity</button>
</div>

我引用了顶部的一个脚本，该脚本将负责重置对话框中的文本字段。我以后也可以用它。但是当我在主页上调用这样的对话框时，脚本没有加载到页面中：

<a  id="" data-toggle="modal" data-target="#mainModal" 
   href="modals/createmodal.html"
   data-remote="modals/createmodal.html" 
   onclick="Utilities.SetFocusModal('txtEntityNameCreate')">
    <img src="../Images/create.png" />
    <h4>Create Entity</h4>
</a>

加载对话框时，如何加载modals.js？

谢谢。

当远程加载引导模式时，它们不会重新加载dom，因此页面不会被重新加载到模式中，html只是被插入，因此您的脚本很可能没有执行，不确定您的脚本看起来是什么样子，但这很可能是问题所在。Bootstrap有一个jquery函数，用于显示模态的时间。因此，如果您的脚本在正常加载html时运行正常，比如只打开代码片段时，那么您可能可以在主页上执行以下操作：

$('#mainModal').on('shown.bs.modal', function () {
  //then put your script here
});

或者

$('#mainModal').on('shown.bs.modal', function () {
  $.getScript('path/to/script.js');
});

然后，当显示#mainModal时，您的脚本将执行。

相关文章：