bootstrap3模态js未定义函数答案

【问题标题】：bootstrap3 modal js undefined functionbootstrap3模态js未定义函数
【发布时间】：2014-08-15 18:12:48
【问题描述】：

我在 HTML 中有一个常规的引导模式。我正在尝试使用 javascript 显示/隐藏它，但我得到了未定义的函数。

我正在按照引导文档所说的那样做，但我仍然在这一行得到未定义的函数：

$("#registermodal").modal('show');

这是我的 HTML 模式：

<div class="modal fade" id="registermodal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="registerDevice">Klargjøring</h4>
        </div>
        <div class="modal-body">
            <div id="registerContent" class="form-group">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="uuid" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="SIMpin" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="losekod" class="col-lg-4 control-label">Låsekod</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="losekod" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select" class="col-lg-2 control-label">Lokation</label>
                        <div class="col-lg-10">
                            <select size="6" class="form-control" id="lokationSelect">
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
        </div>
    </div>
</div>
</div>

【问题讨论】：

完整的错误信息是什么？是modal()还是未定义的jQuery？

标签： javascript html twitter-bootstrap

【解决方案1】：

试试：

$("#registermodal").modal();

【讨论】：

同样的问题，未定义的函数。
在提供可以提供帮助的代码时，最好解释您期望它工作的原因并链接到任何相关文档。
这不是解决方案！

【解决方案2】：

编辑：我添加了一个点击隐藏：DEMO2

DEMO

它没有像你说的那样给出未定义的函数。我建议包装你的$("#registermodal").modal('show');

在$(document).ready(function(){});

如果这不起作用（或者如果您已经这样做了），我建议您在 </body> 之前添加您的 js 脚本（或链接）

最后一种情况，确保您的 HTML 页面上有 bootstrap.min.js 和 jquery。

【讨论】：

奇怪，我在 javascript 方法中使用了它，这会导致任何问题吗？
你能告诉我你正在使用的js方法吗？您需要确保在 HTML 页面加载完成后调用该方法。
它在一个通过按钮单击调用的函数内部，因此 HTML 被加载。
这是一个愚蠢的问题，但是当我删除 bootstrap.min.js 文件时出现未定义的错误。你有链接在你的页面上吗？这是一个没有 boostrap.min.js jsfiddle.net/Grimbode/bj6Lp/2 的演示
你的demo中的JS代码都没有工作，我更新到最新的bootstrap和jquery，还是一样的问题。

【解决方案3】：

您可能会收到未定义函数的一个原因是您多次定义了 jquery 库。

<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

<div class="modal fade" id="registermodal" aria-hidden="true">
...
...
</div>

<script src="/Scripts/jquery-1.10.2.min.js"></script>

引导库被应用到第一个 jquery 库，但是当您重新加载 jquery 库时，原始引导加载会丢失（模式函数在引导中）。

此问题的一个常见原因是在 Web 应用程序中包含部分代码块时，因为相同的 javascript 文件引用可能会出现在多个位置的完整页面输出中。当您的 js 定义分散在整个页面中时，这尤其危险，即在头部、正文顶部和正文底部（在部分模板中）。

【讨论】：

"...如果您多次定义了 jquery 库。"那是关键。谢谢。
你节省了我的时间！谢谢你。 “jquery 库不应多次导入。”

【解决方案4】：

我解决了我改变的问题

$(id).modal("show")

到

jQuery(id).modal("show").

【讨论】：

令人惊讶的是，只有这个解决方案对我有用。我将 MeteorJS 与 ReactJS 一起使用

【解决方案5】：

在声明自己的 js 文件之前添加以下脚本标记。这将解决错误。

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

【讨论】：