Weird behavior when adding click event to Bootstrap dropdown-toggle

Question

I have a Bootstrap dropdown button with the following markup:

<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>

When you click on a.dropdown-toggle, Bootstrap's javascript toggles the ul.dropdown-menu's visibility by adding the class open to the div.btn-group. All this is well and good.

The problem I'm experiencing occurs when I add my own javascript function to the a.dropdown-toggle's click event. Something like this:

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

When I do this something weird happens. When you click the button, it expands the menu as desired EXCEPT when you click directly on the .caret in the button. When you click directly on the .caret, it only executes my click event.

How can I resolve this and have clicks directly on the .caret toggle the menu like clicking anywhere else on the button does.

http://jsfiddle.net/UZkQL/

This did nothing as could be seen if you added it to the jsfiddle. — mellis481
– mellis481, Commented Mar 26, 2014 at 14:31

dave · Accepted Answer · 2014-03-25 21:22:13Z

1

In your fiddle you have:

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

The issue is that you recreate the span element with the carat, which seems to make it not have a click handler bound to it. A quick and dirty fix would be:

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

answered Mar 25, 2014 at 21:22

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mellis481 Over a year ago

Weird. I'm not sure how I didn't realize this was happening. In my solution, I'm going to keep the caret span and have the button text in a separate span, neither of which will ever be removed. I'll conditionally hide the caret span and change the text span contents as my logic dictates. Thanks for pointing me in the right direction!

Collectives™ on Stack Overflow

Weird behavior when adding click event to Bootstrap dropdown-toggle

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related