Twitter Bootstrap 下拉菜单的事件处理程序？答案

【问题标题】：Event handlers for Twitter Bootstrap dropdowns?Twitter Bootstrap 下拉菜单的事件处理程序？
【发布时间】：2012-08-12 22:04:12
【问题描述】：

我想使用Twitter Bootstrap dropdown button：

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </div><!-- /btn-group -->

当用户将按钮的值更改为“另一个操作”时，我实际上不是简单地导航到#，而是希望以自定义方式处理该操作。

但我看不到任何事件处理程序 in the dropdown plugin 这样做。

是否真的可以使用 Bootstrap 下拉按钮来处理用户操作？我开始怀疑它们是否仅用于导航 - 该示例提供了一个操作列表，这令人困惑。

【问题讨论】：

锚标签点击时触发的功能不工作吗？
首先这些不是任何按钮，这些是锚。您可以通过检查 bootstrap.js 文件来查看事件处理程序。但据我所知，所有这些操作都是用 jQuery 处理的，所以编辑或覆盖这个功能应该没什么大不了的。

标签： javascript twitter-bootstrap

【解决方案1】：

Twitter bootstrap 旨在提供基线功能，并且仅提供基本的 JavaScript 插件来执行屏幕。任何额外的内容或功能，您必须自己做。

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#" id="action-1">Action</a></li>
    <li><a href="#" id="action-2">Another action</a></li>
    <li><a href="#" id="action-3">Something else here</a></li>
  </ul>
</div><!-- /btn-group -->

然后用 jQuery

jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});

【讨论】：

试过了，但是没有触发任何事件。不过，我可以捕捉到单击按钮的事件。还有什么可能阻碍？
@RonnieKilsbo 不确定。该解决方案确实如前所述，我已经使用过无数次了。您可能没有正确设置锚的 id，或者您可能在元素存在之前绑定 - 我强烈建议在这种情况下使用 jQuery's on。
你是对的，我的错。在我用 jQuery 绑定可点击对象后，我在 DOM 中插入了元素，这是一件坏事。 :) 工作，确认。

【解决方案2】：

试试这个：

$('div.btn-group ul.dropdown-menu li a').click(function (e) {
    var $div = $(this).parent().parent().parent(); 
    var $btn = $div.find('button');
    $btn.html($(this).text() + ' <span class="caret"></span>');
    $div.removeClass('open');
    e.preventDefault();
    return false;
});

【讨论】：

【解决方案3】：

在 Bootstrap 3 中，“dropdown.js”为我们提供了触发的各种事件。

click.bs.dropdown
show.bs.dropdown
shown.bs.dropdown

等

【讨论】：

确实如此，但您仍然不能在引导框架内工作以附加事件处理程序。你自己做。 Bootstrap一直都是在屏幕上做事，而不是提供自定义功能。假设开发人员将能够连接他们自己的下拉事件。

【解决方案4】：

这是一个工作示例，说明如何为锚实现自定义函数。

http://jsfiddle.net/CH2NZ/43/

您可以在锚点上附加一个 id：

<li><a id="alertMe" href="#">Action</a></li>

然后使用 jQuery 的点击事件监听器来监听点击动作并触发你的函数：

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});

【讨论】：

上面的例子在 jsfiddle 上似乎已经不存在了。
我添加了一个带有有效链接的新示例。谢谢@ethereal。

【解决方案5】：

我一直在看这个。在填充下拉锚点时，我给了它们一个类和数据属性，所以当你需要做一个动作时，你可以这样做：

<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>

然后在 jQuery 中执行如下操作：

$('.dropDownListItem').click(function(e) {
    var name = e.currentTarget;
    console.log(name.getAttribute("data-name"));
});

因此，如果您在下拉列表中动态生成了列表项，并且需要使用的数据不仅仅是项目的文本值，您可以在创建下拉列表项时使用数据属性，然后只为每个项目提供事件的类，而不是引用每个项目的 id 并生成点击事件。

【讨论】：

【解决方案6】：

这里的任何人都在寻找 Knockout JS 集成。

给定以下 HTML（标准引导下拉按钮）：

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select an item               
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 1</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 2</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 3</a>
        </li>
    </ul>
</div>

使用以下JS：

var viewModel = function(){
    var self = this;

    self.clickTest = function(){
        alert("I've been clicked!");
    }  
};

对于那些希望基于淘汰的可观察数组生成下拉选项的人，代码如下所示：

var viewModel = function(){
    var self = this;

    self.dropdownOptions = ko.observableArray([
        { id: 1, label: "Click 1" },
        { id: 2, label: "Click 2" },
        { id: 3, label: "Click 3" }
    ])

    self.clickTest = function(item){
        alert("Item with id:" + item.id + " was clicked!");
    }  
};

<!-- REST OF DD CODE -->
<ul class="dropdown-menu" role="menu">
    <!-- ko foreach: { data: dropdownOptions, as: 'option' } -->
    <li>
        <a href="javascript:;" data-bind="click: $parent.clickTest, text: option.clickTest"></a>
    </li>
    <!-- /ko -->
</ul>
<!-- REST OF DD CODE -->

注意，可观察数组项被隐式传递到在视图模型代码中使用的单击函数处理程序。

【讨论】：

【解决方案7】：

完全无需更改按钮组，您可以执行以下操作。下面，我假设您的下拉列表 button 有一个 id 或 fldCategory。

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory').parent().find('UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

现在，如果您将此项本身的.btn-group 设置为具有fldCategory 的id，这实际上是更高效的jQuery 并且运行速度更快：

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory BUTTON').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

【讨论】：

哈！谢谢，这很光滑！ :) 我用了你的第二个例子。
这应该是答案！

【解决方案8】：

在这里，选项具有值、标签和 css 类，它们会在选择时反映在父元素上。

$(document).on('click','.update_app_status', function (e) {
            let $div = $(this).parent().parent(); 
            let $btn = $div.find('.vBtnMain');
            let $btn2 = $div.find('.vBtnArrow');
            let cssClass = $(this).data('status_class');
            let status_value = $(this).data('status_value');
            let status_label = $(this).data('status_label');
            $btn.html(status_label);
            $btn.removeClass();
            $btn2.removeClass();
            $btn.addClass('btn btn-sm vBtnMain '+cssClass);
            $btn2.addClass('btn btn-sm vBtnArrow dropdown-toggle dropdown-toggle-split '+cssClass);
            $div.removeClass('show');
            $div.find('.dropdown-menu').removeClass('show');
            e.preventDefault();
            return false;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


  

   <div class="btn-group">
   <button type="button" class="btn btn-sm vBtnMain btn-warning">Awaiting Review</button>
   <button type="button" class="btn btn-sm vBtnArrow btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
   </button>
   <div class="dropdown-menu dropdown-menu-right">
     <a class="dropdown-item update_app_status" data-status_class="btn-warning" data-status_value="1" data-status_label="Awaiting Review" href="#">Awaiting Review</a>
     <a class="dropdown-item update_app_status" data-status_class="btn-info" data-status_value="2" data-status_label="Reviewed" href="#">Reviewed</a>
     <a class="dropdown-item update_app_status" data-status_class="btn-dark" data-status_value="3" data-status_label="Contacting" href="#">Contacting</a>
     <a class="dropdown-item update_app_status" data-status_class="btn-success" data-status_value="4" data-status_label="Hired" href="#">Hired</a>
     <a class="dropdown-item update_app_status" data-status_class="btn-danger" data-status_value="5" data-status_label="Rejected" href="#">Rejected</a>
   </div>
   </div>

【讨论】：