Twitter Bootstrap下拉菜单的事件处理程序？
我想使用Twitter Bootstrap下拉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 --> 当用户将button的值更改为“另一个动作”，而不是简单地导航到# ，我实际上喜欢以自定义的方式处理该操作。
但是在下拉插件中我看不到任何事件处理程序。
实际上是否可以使用Bootstrap下拉button来处理用户操作？ 我开始怀疑他们是否只是为了导航 – 这个例子给出了一个行动列表，令人困惑。
Twitter的引导是为了给出一个基准的function，并提供只有基本的JavaScript插件， 在屏幕上做一些事情。 任何额外的内容或function，你必须自己做。
<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(); });
尝试这个：
$('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; });
在Bootstrap 3中，dropdown.js为我们提供了触发的各种事件。
click.bs.dropdown show.bs.dropdown shown.bs.dropdown
等等
下面是一个如何为锚定实现自定义函数的工作示例。
你可以附加一个id到你的锚点：
<li><a id="alertMe" href="#">Action</a></li>
然后使用jQuery的click事件监听器来监听点击操作并激发你的function：
$('#alertMe').click(function(e) { alert('alerted'); e.preventDefault();// prevent the default anchor functionality });
我一直在看这个。 在填充下拉锚时，我给了他们一个类和数据属性，所以当需要做一个动作时，你可以这样做：
<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")); });
因此，如果您在下拉列表中dynamic生成列表项目，并且需要使用不仅仅是项目文本值的数据，则可以在创build下拉列表项目时使用数据属性，然后仅为每个项目分配类别事件，而不是引用每个项目的ID并生成一个点击事件。
任何人在这里寻找Knockout JS集成。
鉴于以下HTML（标准引导下拉button）：
<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!"); } };
对于那些希望基于knockout可观数组生成下拉选项的代码，其代码如下所示：
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 -->
请注意，observable数组项隐式传递到click模型代码中使用的click函数处理程序中。
完全不必更改button组，您可以执行以下操作。 下面，我假设你的下拉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设置为.btn-group的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>
