javascript - 捕获 .bs.dropdown 事件-6ren

javascript - 捕获 .bs.dropdown 事件

转载作者：行者123 更新时间：2023-12-02 23:46:37

27

4

我正在尝试从引导下拉列表中捕获事件。似乎什么都不起作用，尽管显然我做错了什么。

代码，精简为问题......

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
        <title>Demo</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="navbar">
            <a class="nav-link dropdown-toggle" href="#" id="search_drop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Search
            </a>

            <div class="dropdown-menu" aria-labelledby="search_drop">
                <h2 class="text-primary">Search</h2>
                <form class="navbar-form navbar-right navbar-expand-xl" id="header-searchForm">
                    <input type="text" class="form-control" placeholder="enter terms" name="Search" aria aria-selected="true" id="search_str" required="true">
                    <button type="submit" class="btn btn-sm btn-primary">
                        Search
                    </button>
                </form>
            </div>      
        </div>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        <script type="text/javascript">
            $('#search_drop').on('show.bs.dropdown', function() {
                console.log("show");
            }).on('shown.bs.dropdown', function() {
                console.log("shown");
            }).on('hide.bs.dropdown', function() {
                console.log("hide");
            }).on('hidden.bs.dropdown', function() {
                console.log("hidden");
            });
        </script>

    </body>
</html>

没有任何一个 console.log 语句被命中。

最佳答案

您需要将触发按钮包装在具有下拉类和目标的元素中:

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

还有...

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;.

$('.dropdown').on('show.bs.dropdown', function() {
  console.log("show");
}).on('shown.bs.dropdown', function() {
  console.log("shown");
}).on('hide.bs.dropdown', function() {
  console.log("hide");
}).on('hidden.bs.dropdown', function() {
  console.log("hidden");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="navbar">
  <div class="dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="search_drop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Search
            </a>

    <div class="dropdown-menu" aria-labelledby="search_drop">
      <h2 class="text-primary">Search</h2>
      <form class="navbar-form navbar-right navbar-expand-xl" id="header-searchForm">
        <input type="text" class="form-control" placeholder="enter terms" name="Search" aria aria-selected="true" id="search_str" required="true">
        <button type="submit" class="btn btn-sm btn-primary">
                        Search
                    </button>
      </form>
    </div>
  </div>
</div>

关于javascript - 捕获 .bs.dropdown 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55834376/

27

4

0

文章推荐： javascript - 单击 div 未打开模式

文章推荐： javascript - Momentjs 日期值转换为日期时间格式

javascript - Lite-server 未检测到 `bs-config.json` 或 `bs-config.js` 覆盖文件
我正在尝试运行基于 angular2 的第一个应用程序。我关注了angular2脚步。当我运行命令 npm start 然后它在终端中给出以下错误 Did not detect a bs-config
javascript - Bootstrap 3 - 如果 Accordion 在模态内，则不会触发事件 shown.bs.collapse 或 shown.bs.modal
×
angular - 在 Angular 2 中，未检测到 `bs-config.json` 或 `bs-config.js` 覆盖文件。使用精简服务器默认值？
我在 stackovefflow 上搜索并没有找到这个问题的答案。我是 Angular 2 的新手，我正在创建一个演示应用程序，但是当我执行 npm start 时，此消息显示在终端/控制台上。虽然它
javascript - 如果 Bootstrap .popover() 位于 ('hidden.bs.popover' 上，则“销毁”正在触发另一个 'hidden.bs.popover' 事件
如果 .popover() 之后变成 .on('hidden.bs.popover')，我想'销毁'是 .on('shown.bs.popover' 所以它不会再 'show' 。一切似乎都正确，但看
vim - 如何在vim命令模式下导出？
我在玩 vimgolf challenge 时遇到了以下问题: :%s/V/i?/giiZZ 我认为意思是“退格键”，但是当我在键盘的命令行模式下按退格键时，它只是删除了“？” (我正在使用带有 Mi
css - BS 旋转木马图像在移动设备和较小尺寸的浏览器上失真
我正在制作一个 BS 轮播。当浏览器较小且文本未居中时，图像看起来不合适并且不会完全覆盖轮播。我该如何解决这个问题？我还没有找到可以帮助我的答案。这是我的 CSS: .carousel-inn
html - BS 网格工作不相同
在优势网格中，当单击另一个分区时，一个分区的卡体会折叠。然而，另一个网格并没有发生同样的情况(缺点)。当我们单击劣势部分的一个分区时，当我们再次单击劣势部分的另一个分区时，它不会被折叠。然而，这是在优
css - BS 重叠栏内容
在下面的代码中，我正在学习如何创建 2 列，并将左列用作可滚动的导航栏。我这里还处于零阶段，所以请原谅质量! 我在将 .sidebar 类设置为左栏中的 "position:fixed" 时遇到了问题
Python、BS 和 Selenium
我尝试使用 javascript 动态 + bs + python 进行网页抓取，并且我阅读了很多内容来编写此代码，例如，我尝试在著名网站上抓取使用 javascript 呈现的价格: from bs
css - 右对齐的 BS header
我想在右侧的标题中添加一个额外的小元素，该元素与右侧对齐，如下所示: Headersubheadersubheader right 但是右侧的 span 元素放置得更高/与第一个小元素不在一条直线上。
javascript - BS 3 在单击链接并显示选项卡时获取数据属性值
我正在使用 BS3 并且有这样的选项卡: Annual Summary Monthly Summary 我在第一个选项卡中有一个像这样的链接:
css - BS 4 切换图标交换
有谁知道如何在使用 css 打开或关闭时更改 bootstrap 4 navbar-toggler-icon？我认为这很简单，但我真的找不到任何东西。 .map-controls-mobile .na
Python + BS 从网页表中选取一个特定的词(位置)
大家好……我想从网页上的表格中选择一个关于特定位置的词。源代码如下: table = ''' Code: BAN Color: White ''
c++ - BS-42e6.gcno文件调试
我正在尝试使用现有代码库配置 gcov 以实现代码覆盖。现有代码base 是基于服务的代码库(即包含多个文件 c 和 cpp 以及一项服务) 我已经关注了配置 gcov 的 wiki 页面并添加了 -
javascript - Bootstrap中show.bs.dropdown的使用流程
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 8 年前。 Improve t
gwt - Google GWT 跨浏览器支持 : is it BS?
我在 FlashBuilder 中开发了一个浏览器部署的全文搜索应用程序，该应用程序以 REST 方式与远程 Web 服务器进行通信。该软件适合一个小众市场——它适用于古代语言而不是现代语言，我不可能
javascript - bs-tooltip 限制双向数据绑定(bind)
我正在尝试使用 Angular 带的 Bootstrap 工具提示编写简单的代码。我发现使用 bs-tooltip 时 AngularJs 数据绑定(bind)不起作用。绑定(bind)不起作用
javascript - 在 bs 模态窗口中正确显示 slider
我使用 bootstrap modal + slick slider 在 bs modal 窗口中显示 slider ，但在显示时遇到一些问题。自动播放之前 slider 未打开 not work 但
javascript - 捕获 .bs.dropdown 事件
我正在尝试从引导下拉列表中捕获事件。似乎什么都不起作用，尽管显然我做错了什么。代码，精简为问题...... Dem
javascript - 替换Bootstrap 4中的loaded.bs.modal
为什么 loaded.bs.modal 事件从 Bootstrap 4 中删除？有什么东西可以代替它吗？ shown.bs.modal 非常相似，但它不会等待模态完全加载，而只是显示。最佳答案基本

首页

博学

6Ren·AI

商城

javascript - 捕获 .bs.dropdown 事件