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

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.