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

【问题标题】：Bootstrap - $(...).modal is not a function / Solution: DataTables conflict (multiple includes of jquery)Bootstrap - $(...).modal 不是函数/解决方案：DataTables 冲突（jquery 的多个包含）
【发布时间】：2017-08-05 21:54:36
【问题描述】：

当我尝试从自定义 javascript 文件中调用与引导模式相关的内容时出现以下错误：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";
?>

包含jquery的我的footer.php：

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

【问题讨论】：

您还应该为 bootstrap 和 jquery 包含 CSS
TypeError: $(...).modal is not a function with bootstrap Modal的可能重复
谷歌具体错误。这很有意义。你会发现很多资源。我们在您的问题中没有足够的信息来为您回答这个问题。
@perumalN 我已经编辑了我的问题并包含了 header.php 代码......
@cale_b 我已经做到了。找不到解决方案。我应该在问题中包含任何具体内容以便我得到答案吗？

标签： javascript php jquery twitter-bootstrap modal-dialog

【解决方案1】：

这通常是因为您的脚本加载顺序错误。确保您没有高于它所需的脚本。

例如，bootstrap 依赖于 jQuery，因此必须首先引用 jQuery（正如您所做的那样）。

可能发生的另一件事是对 jQuery 的两次引用，请检查您的脚本本身都没有引用 jQuery。如果我没记错的话，datatables.js 实际上包含对 jQuery 的引用。

【讨论】：

好的，如果我是对的，我只能从 HTML/PHP 文件中引用 js 库。我有以下 php 文件：header.php（无
@cale_b 是的，这个问题被问了很多次。我已经检查了所有答案，但找不到解决方案。这就是为什么我用我拥有的所有代码发布它，因为它可能是特定的，也可能不是......
我会注释掉 php 标签，将所有脚本标签放在页面上以及你的 document.ready 函数并测试它是否有效。
如果我没记错的话，datatables js 也引用了 jQuery。检查你没有加载 jQuery 两次
@twoleggedhorse 是的，你是对的，datatables.js 带有 jquery。我重新下载了一个没有 jquery 的新包（他们的下载页面上有一个选项）。现在就像一个魅力。非常感谢。

【解决方案2】：

我使用 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'
            }
        });
    });

【讨论】：