使用 JQuery 后，Bootstrap 4 Dropdown 被禁用答案

【问题标题】：Bootstrap 4 Dropdown get's disabled after using JQuery使用 JQuery 后，Bootstrap 4 Dropdown 被禁用
【发布时间】：2023-03-18 23:51:01
【问题描述】：

我使用堆栈已经有一段时间了，大部分时间我都找到了我需要的解决方案或对我的问题有帮助的东西，但对于这种情况，我无法让它工作。

我正在为我的期末项目建立一个网站，因为我正在西班牙学习“Web 应用程序开发”一个专业的形成模块。考虑到响应式设计，我结束了使用 Bootsrap，我发现我自己的 JS 代码禁用了 Bootstrap 下拉菜单。

澄清一下：我正在使用完整的 jquery，因为我需要 .load() 无法让 iframe 显示完整的八个内容，解决方案是在 div 中加载另一个文件在小屏幕上正确调整大小的元素。

Functions.php 是一种帮手，我在其中删除一些函数，在这种情况下读取数据库并为下拉菜单生成项目

是的，我想在其中加载其他文件，如果您知道如何让 iframe 显示所有内容并在引导程序中正确调整大小，请告诉我，我的工作是 jquery+divs，它有点工作......

php 代码在生成菜单时完美运行（我可以在 firefox 的代码检查器中看到所有元素）

HTML（它是一个php文件... index.php）：

  <?php
include 'functions.php';
?>
<!DOCTYPE html>
<html>
<head>
    <title>Project B.W.A.S.T</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!-- TOP menu -->
    <div class="top_navbar">
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <!-- Web logo -->
            <!-- Button for collapsing the navbar -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible_nav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Navbar collapsable on small devices -->
            <div class="collapse navbar-collapse" id="collapsible_nav">
                <ul class="navbar nav">
                    <!--  MAIN INDEX/HOME -->
                    <li class="nav-item dropdown">
                      <a class="btn btn-secondary dropdown-toggle" type="button" id="navbardrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        CHAMPIONS
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbardrop">
                        <?php 
                            $champions= list_champions();
                            foreach ($champions as $row) { 
                        ?>
                        <a id="champion_menu_button" class="dropdown-item" href="#"> <?php echo $row['name']; ?> </a>
                        <?php } ?>
                      </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

        <!-- MAIN CONTENT -->
    <div id="main_space" class="pt-2 pb-2 m-0 ">
    </div>

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MyjS -->
<script src="mainWindowJS.js" defer async></script>

</body>
</html>

Javascrip "mainWindowJs.js"

$("document").ready(function(){
     $("div#main_space").load("main_content.php");
});

按顺序导入并在最后加载我自己的 JS，下拉菜单永远不会打开，但删除我的 JS 代码会使下拉菜单工作。

问题很简单：伙计们，我该如何解决？！，严重的是我被卡住了。

【问题讨论】：

Enable/Disable a dropdownbox in jquery的可能重复

标签： php jquery html bootstrap-4

【解决方案1】：

所以问题实际上并不在于内容。

与之前我使用 Iframe 一样，我必须在要显示在框架上的内容中加载所有引导 css jQuery 等。由于我正在切换到 div，因此内容实际上是在同一页面中加载的。

所以我在主页中对所有内容进行了双重导入。 jQuery、Popper 和 Bootstrap 的 JavaScript 的双重加载。

删除其中一个可以解决问题。

【讨论】：