bootstrap3模式js未定义函数

Question

我在HTML中有一个常规的bootstrap-modal。我试图用javascript显示/隐藏它，但我得到了未定义的函数。

我按照bootstrap文档所说的那样做，在这一行上仍然得到了未定义的函数：

$("#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>

Answer 1

您可能收到未定义的函数的一个原因是，如果您已经多次定义了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>

bootstrap库应用于第一个jquery库，但是当您重新加载jquery库时，原始的bootstrap加载会丢失(Modal函数在bootstrap中)。

此问题的一个常见原因是，当在web应用程序中包含部分代码块时，因为相同的javascript文件引用可能会出现在多个位置的完整页面输出中。当你的js定义分散在你的页面中时，这是特别危险的，例如，在页面的头部，主体的顶部和底部(在部分模板中)。

Answer 2

我解决了我的问题

$(id).modal("show") 

至

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

Answer 3

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

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