Question

我正在尝试在单击跨度时打开引导模式对话框，我在互联网上搜索了我的问题的解决方案 bootstrap modal $（...）。modal不是函数< / em> 但我发现的唯一解决方案是“将jQuery脚本放在bootstrap脚本之前，因为bootstrap依赖于jQuery”所以我先把jQuery放到了它，它仍然给了我同样的错误： < em> 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>

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

Answer 1

您正在使用"\400" === "\000"

这是 jsFiddle

使用

jQuery.noCoflict

请告诉我它是否有效。

<强>更新

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

依赖jQuery.noConflict(); jQuery('#myModal') ....的脚本的其他部分也应更改为$

Answer 2

＆＃13;

$(document).ready(function () {

     // Attach Button click event listener 
    $('.glyphicon-remove spanRemoveTransaction').click(function(){

         // show Modal
      alert("pp")
         $('#myModal').modal('show');
    });
});

＆＃13;

<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>

＆＃13;

bootstrap modal $（...）。modal不是函数

2 个答案: