将点击事件添加到 Bootstrap 下拉切换时的奇怪行为

Question

我有一个带有以下标记的 Bootstrap 下拉按钮：

<div class="btn-group dropup">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Test<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </li>
    </ul>
</div>

当您单击 a.dropdown-toggle 时，Bootstrap 的 javascript 通过将类 open 添加到 div.btn-group 来切换 ul.dropdown-menu 的可见性。这一切都很好。

当我将自己的 javascript 函数添加到 a.dropdown-toggle 的点击事件时，会出现我遇到的问题。像这样的：

$('a.dropdown-toggle').click(function (e) {
    e.preventDefault();
    $('a.dropdown-toggle').html('Testing...');
});

当我这样做时，会发生一些奇怪的事情。当您单击按钮时，它会根据需要展开菜单，除非您直接单击按钮中的.caret。当你直接点击.caret时，它只会执行我的点击事件。

我该如何解决这个问题并直接点击.caret 来切换菜单，就像点击按钮上的其他任何地方一样。

http://jsfiddle.net/UZkQL/

Answer 1

在你的小提琴中，你有：

$('a.dropdown-toggle').html('Testing...<span class="caret"></span>');

问题是您使用克拉重新创建了 span 元素，这似乎使它没有绑定点击处理程序。一个快速而肮脏的解决方法是：

$('a.dropdown-toggle').click(function (e) {
    e.preventDefault();
    if ($('a.dropdown-toggle').text().indexOf('ing...') == -1) {
        $('a.dropdown-toggle').find('span').before('ing...');
    }
});