How to prevent # at the end of URL in a BootStrap Drop-down?

Question

I have this link:

<a href="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

I use preventDefault() and return false to avoid the # at the end of my address. And it works perfectly. The problem is when I do the same with Bootstrap's dropdown. If I leave return false it doesn't add the # at the end as supposed, but it also prevents the dropdown from disappearing as it would if I remove return false. This is my dropdown code:

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="ddBtn">
    <i class="icon-wrench"></i><span>Parent Item<b class="caret"></b></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="ddSonBtn">Child item</a></li>

Javascript:

$("#ddSonBtn").click(function () {
    //some code

    e.preventDefault();
});

Is there a solution for this?

I am using

Bootstrap 2
jQuery

Thanks.

Answer 1

According to the Bootstrap docs:

http://getbootstrap.com/javascript/#dropdowns

it is necessary to replace href by data-target attribute, i.e.

<a data-target="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

I believe it is more "bootstrapish" way to do things rather than suppressing event handlers or manually manipulating the show/hide behavior.

Answer 2

It may or may not be well documented, but there's no need to call both preventDefault() and return false; in jQuery events.

EDIT: From jQuery's on docs: "Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()" ( http://api.jquery.com/on/#event-handler )

return false; is the equivalent of e.preventDefault(); and e.stopPropagation();

preventDefault prevents the default behavior of an element - such as a submit button submitting a form, an anchor navigating to a specific href, etc.

stopPropagation stops the event from bubbling up the DOM. Meaning, events won't be triggered on parent elements of the target element.

Pick and choose which you need when working with Events. In your situation, you probably only need to call preventDefault in your Dropdown's click handler.

Also, in your code, the use of return in a function's scope is the last line of execution. Any code after it will not be executed when the function is run.

Answer 3

Just remove the # value from the href attribute. It's valid HTML to leave href empty.

<a href="" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>