bootstrap modal $(...).modal 不是一个函数答案

【问题标题】：bootstrap modal $(...).modal is not a functionbootstrap modal $(...).modal 不是一个函数
【发布时间】：2016-10-26 11:49:43
【问题描述】：

我试图在单击跨度时打开一个引导模式对话框，我已经在互联网上搜索了我的问题的解决方案引导模式 $(...).modal 不是一个函数 但我找到的唯一解决方案是“将 jQuery 脚本放在引导脚本之前，因为引导依赖于 jQuery”所以我将 jQuery 放在首位，它仍然给我同样的错误：bootstrap modal $(...).modal 不是函数

这是我目前尝试过的代码：

HTML

<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="myModal" data-target="#modal"></span>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <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">Are you sure you want to delete this transaction?</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="delete">Delete</button>
            </div>
        </div>
    </div>
</div>

jQuery

$(".spanRemoveTransaction").on('click', function (e) {
    theTransactionId = $(this).attr("value");
    e.preventDefault();
    deleteTransactionModal(theTransactionId, e);
});

function deleteTransactionModal(theTransactionId, e) {
    e.preventDefault();
    $('#myModal').modal({
        keyboard: false
    }).on('click', '#delete', function (e) {
        var url = config.deploymentIp + "/Controller?deleteTransaction";
        var transactionId = "";
        $.ajax({
            dataType: "json",
            type: "POST",
            url: url,
            data: {transactionId: theTransactionId},
            success: function (data, textStatus, jqXHR)
            {
                if (!data["has_errors"]) {
                    $('table#transactionList tr#'+theTransactionId).remove();
                } else {
                    transactionId = data.errors["transactionId"];

                    if (transactionId === "transactionIdError") {

                    }
                }
            }
        });
    });
}

脚本

    <script src="js/jquery/jquery.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="includes/selectpicker.js" type="text/javascript"></script>
    <script src="js/currencyExchange.js" type="text/javascript"></script>
    <script src="js/atbottom.js" type="text/javascript"></script>
    <script src="js/config.js"></script>
    <script src="includes/loadBottomScript.js" type="text/javascript"></script>
    <script src="js/menuScript.js" type="text/javascript"></script>
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
    <script src="includes/datepicker.js" type="text/javascript"></script>
    <script src="js/transfers.js" type="text/javascript"></script>

如果有人对此有解决方案，或者恰好有新的眼光并可以帮助我找到问题所在，将不胜感激。

【问题讨论】：

在浏览器中查看script是否正在渲染
为什么在调用.modal()方法之前有jQuery.noConflict();？
会不会是你加载的bootstrap.js版本不包含modal.js
您缺少} 来关闭第二个函数，我假设您只是没有复制整个脚本。
已编辑，但仍然无法正常工作 - @karasci_maci 是的，这是一个错版，感谢您指出。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您正在使用jQuery.noCoflict

这是一个jsFiddle

使用

 jQuery.noConflict();
 jQuery('#myModal') ....

请告诉我它是否有效。

更新

正如@dashtinejad 在没有冲突之后在他的评论中指出的另一件事：

依赖$ 的脚本的其他部分也应更改为jQuery

【讨论】：

脚本中依赖$的其他部分也应更改为jQuery。
这很奇怪，因为它在小提琴中工作，当我抓住小提琴中的东西并将其放入我的应用程序时，我遇到了和以前一样的问题
在将$ 重写为jQuery 后检查控制台是否有错误。使用您的代码，而不是来自小提琴，我将您的代码复制到小提琴 :) 然后可能是您的其他一些脚本冲突。尝试一一评论它们，然后重新加载页面。或者只使用必要的脚本和 css 创建一个空白页面。
您可以使用这个$ = jQuery.noConflict();，而不必再将所有$ 替换为jQuery。
这很有趣，如果我把 $('#dummyModal').modal();例如，在准备好的文档中，它会在我加载页面时出现。但是如果我将同一段代码放在一个函数中，该函数确实也在文档中准备好了，它不会出现......我迷路了

【解决方案2】：

$(document).ready(function () {

     // Attach Button click event listener 
    $('.glyphicon-remove spanRemoveTransaction').click(function(){

         // show Modal
      alert("pp")
         $('#myModal').modal('show');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="modal" data-target="#myModal">click the span</span>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <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">Are you sure you want to delete this transaction?</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="delete">Delete</button>
            </div>
        </div>
    </div>
</div>

【讨论】：