CODEWITHSUNDEEP
jquerytwitter-bootstrap
Holger
Holger

Reputation: 502

jquery on click only fires first time

I am using bootstrap for a dropdown list of different categories. When the user clicks on one category in the list, the category selector (the one displayed in the dropdown-toggle) should change its title to the one clicked. Here is an example.

It works the first time the users clicks an item. But when clicking again on a list item nothing happens. Seems that the on click event only fires once, although I used the delegated version of it (which I need, because the DOM might change).

Here's the HTML of the 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 the 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;
});

Upvotes: 0

Views: 1236

Answers (1)

Chris Klongpayabal
Chris Klongpayabal

Reputation: 51

With the drop down, when you click on an open document, it automatically closes the menu. Using the jsfiddle example you gave, removing the last two lines:

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

allows the code to run multiple times. Removing the "return false" is just good practice because you already negated the click action with e.preventDefault();

Upvotes: 1

Related Questions