CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Dan Tappin
Dan Tappin

Reputation: 3032

jQuery function fails after .html() call

I have a bootstrap drop down button that after the user clicks on it the controller loads and responds with JS in which it re-renders the html from a partial.

In the Bootstrap drop down button I have <ul class="dropdown-menu keep-open"> where the keep-open class is used by:

$(document).ready ->
  $('.keep-open').on 'click': (e) ->
    e.stopPropagation()
    return

To keep the drop down open when you click in it vs. closing by default (I have a form in the drop down). The call works fine until I submit the for and the controller JS re-renders the button then the keep-open stops working and the drop down menu keeps closing.

Can I either keep this menu open another way or what is preventing the $('.keep-open').on 'click' from being called again?

Upvotes: 0

Views: 57

Answers (1)

Thernys
Thernys

Reputation: 723

To elaborate on the commenters, your problem arises from your directly bound event handler. The handler is only called when the event occurs on the exact element to which it was bound. Your re-render removes the original element, and the newly created element does not have a handler attached.

You can likely solve this problem by using a delegated event handler instead:

$('body').on('click' , '.keep-open' , function() { ... });

You should see the section on 'Direct and delegated events' in the jQuery .on() docs

Upvotes: 1

Related Questions