How to remove preventDefault behaviour of Bootstrap dropdown

Question

I'm using Bootstrap 3 dropdown menu in my markup. But other than the default behaviour, it should pop out if I'm hovering the elements. So I created a small script:

jQ('.dropdown').hover(function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}, function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});

which is working fine. But for some reason the Bootstrap dropdown prevents redirecting to another page when I want to have the first item (which triggers the hover) as a link. I'm clicking on the link and nothing happens, it only appends a class .open. I only can open the link if I do a right click and select open destination in new tab. How can I fix this?

Thanks

Answer 1

Simply remove data-toggle="dropdown" attribute from the button (I suppose it's anchor tag):

<a class="btn btn-default dropdown-toggle" href="http://somewhere" target="_blank" id="dropdownMenu1" >
    Dropdown
    <span class="caret"></span>
</a>

JSFiddle

---

data-toggle attribute is an indicator for bootstrap, that an event should be bind to the element, depends on the attribute value:

data-toggle="dropdown"
data-toggle="tooltip"
data-toggle="modal"
data-toggle="popover"
data-toggle="tab"
data-toggle="collapse"
data-toggle="button"

NOTE: You may have a problem on mobile devices with the "click open link" scenario.