twitter bootstrap - jquery on click only fires first time -

i using bootstrap dropdown list of different categories. when user clicks on 1 category in list, category selector (the 1 displayed in dropdown-toggle) should change title 1 clicked. here example.

it works first time users clicks item. when clicking again on list item nothing happens. seems on click event fires once, although used delegated version of (which need, because dom might change).

here's html of dropdown list:

<div class="dropdown inline hide" style="display: block;">    <a href="#" data-toggle="dropdown" class="dropdown-toggle">     <span class="current-category">no category</span><span class="caret"></span>   </a>    <div class="dropdown-menu scroll-pane">     <ul>       <li><a class="category-selection" href="#">no category</a></li>       <li><a class="category-selection" href="#">category 1</a></li>       <li><a class="category-selection" href="#">category 2</a></li>             </ul>   </div> </div> 

here's javascript:

$("body").on("click", "a.category-selection", function(e) {   e.preventdefault();    $(this).closest(".dropdown").find(".current-category").html($(this).html());   $(this).closest(".dropdown-menu").dropdown('hide');    return false; }); 

with drop down, when click on open document, automatically closes menu. using jsfiddle example gave, removing last 2 lines:

$(this).closest(".dropdown-menu").dropdown('hide'); return false; 

allows code run multiple times. removing "return false" practice because negated click action e.preventdefault();