dropdown toggle not working from event handler

Question

I'm creating a basic dropdown menu with twitter bootstrap. When I click on the button that opens the dropdown menu, everything works fine.

The problem is, when I try to toggle dropdown by clicking some other element on the page (I need this functionality)

$(document).on("click", ".drop-toggle", function(e) {
    console.log("working");
    $(".btn-group").toggleClass("open");
});

I can see console message, but nothing happens.

When I simply call

$(".btn-group").toggleClass("open");

it works, but it doesn't work from the event handler. Any ideas why?

Burak Ozdemir · Accepted Answer · 2014-07-01 21:33:02Z

1

You need to stop event propagation.

$(document).on("click", ".drop-toggle", function(e) {
    e.stopPropagation();
    $(".dropdown-menu").dropdown("toggle");
});

answered Jul 1, 2014 at 21:33

Burak Ozdemir

5,3623 gold badges26 silver badges30 bronze badges

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

1 Comment

i will try it @home, but it seems to be working. will mark as answered if it's all right :)