Bootstrap - $(...).modal不是一个函数/解决方案：DataTables冲突(jquery的多个包含)

5jvtdoz2 于 12个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(116)

当我尝试从自定义JavaScript文件调用与bootstrap modals相关的东西时，我得到以下错误：CLICK HERE FOR IMAGE
我的index.php：

<?php
  require "includes/header.php";
  require "includes/navigacija.php";
?>

<div class="modal fade" tabindex="-1" role="dialog" id="dodajVraboten">
    <div class="modal-dialog modal-lg" 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"><span class="glyphicon glyphicon-plus-sign"></span> Додај вработен</h4>
            </div>
            <!-- MODAL CONTENT -->
        </div>
    </div>
</div>

<?php
  require "includes/footer.php";
?>

我的footer.php，其中包含jquery：

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/skripti.js"></script>
        <script type="text/javascript" src="js/postavki.js"></script>
    </body>
</html>

当我在postavki.js中运行以下代码时，我得到错误：

$(document).ready(function() {
    $('#dodajVraboten').modal('show');
});

正如你所看到的，我首先加载jquery，然后引导，然后是我的自定义js文件（postavki.js），在那里我得到了那个错误。我也读到过，如果我多次加载jquery，我会得到这个错误，但这不是问题，因为我只在header.php中加载它

如果您无法打开镜像，这里是错误：

postavki.js:18 Uncaught TypeError: $(...).modal is not a function
at HTMLDocument.<anonymous> (postavki.js:18)
at fire (datatables.js:3199)
at Object.fireWith [as resolveWith] (datatables.js:3329)
at Function.ready (datatables.js:3548)
at HTMLDocument.completed (datatables.js:3564)

先谢谢你了。

编辑（如果header.php有任何不同）：

<!DOCTYPE html>

<html lang="mk">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>asd</title>

        <link rel="icon" href="sliki/favicon.ico" type="image/x-icon"/>

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/normalize.css" rel="stylesheet">
        <link href="css/stil.css" rel="stylesheet" type="text/css">
    </head>

    <body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/45526704/bootstrap-modal-is-not-a-function-solution-datatables-conflict-mult

3条答案

按热度按时间

t40tm48m1#

这通常是因为您的脚本以错误的顺序加载而导致的。请确保您没有一个脚本以上的一个，它需要。
例如，bootstrap依赖于jQuery，因此必须首先引用jQuery（正如您所做的那样）。
另一件可能发生的事情是两次引用jQuery，检查你的脚本没有引用jQuery本身。如果我没记错的话，datatables.js实际上包含了对jQuery的引用。

赞(0）回复(0）举报 12个月前

aurhwmvo2#

我使用Jquery V3.3.1 Bootstrat V4.1.0 Momment.js V2.18.0和Fullcalendar 3.9.0，
EventClick工作得很好，但您必须按以下方式定义它

$(document).ready(function () {
        $("#calendar").fullCalendar({
            lang: 'es',
            events: '/Citas/Eventos',
            eventColor: '#378006',

            **eventClick: function (event, element) {
                var url = '@Url.Action("Edit", "Citas")' + "/" + event.id;
                $('.modal-body').load(url, function () {
                    jQuery.noConflict();
                    $('#ModalAccion').modal('show');
                });** 
            },

            header:
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            buttonText: {
                today: 'Hoy',
                month: 'Mes',
                week: 'Semana',
                day: 'Dia'
            }
        });
    });

赞(0）回复(0）举报 12个月前

bd1hkmkf3#

对我来说，我必须像这样声明模态;

myModal = new bootstrap.Modal(document.getElementById('myID'));

然后调用失败的$('#myID').modal('show')，抛出错误“$（...）.modal不是一个函数”，我这样调用它myModal.show();，它工作了！

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap - $(...).modal不是一个函数/解决方案：DataTables冲突(jquery的多个包含)

3条答案

相关问题

热门标签

最新问答