AJAX replace breaks dropdown - Twitter Bootstrap - ruby-on-rails

Question

I have a functional dropdown:
<li data-dropdown="publish-dropdown-menu">
<a href="#" id="publish">
Publish
<img alt="" border="0" src="/assets/publish-arrow.jpg">
</a>
</li>
And the elements for this dropdown are(HAML):
.home-dropdown-menu.publish-dropdown-menu#publish-dropdown-menu
.top-arrow
%a.your-services{:href => new_service_path}
.icon-drop
%span
Your
%br>/
Service
%a.your-event{:href => new_event_path}
.icon-drop
%span
Your
%br>/
EVENT
But when this is replaced by AJAX this won't work anymore.
This is what I tried:
$('#publish').dropdown()
$('#publish').parent().dropdown()
But none of these worked.
Any advice on how to reset dropdown behaviour after page has been loaded.
Update
This is how I am replacing content:
$('#header').html('<%= escape_javascript(render 'layouts/header') %>')
Header has a lot of other content so is not easy for me to replace some parts.

Answer 1

The dropdown function or any events which were attached when DOM was loaded for the first time does not work for newly added elements. You need to reattach any events that were initially attached and re-call functions that you had called on those elements.
The reattachment of events can be achieved using jQuery on() method, but as dropdown is not an event and is a function we need to implement something like the following:
Trigger an event e.g. 'show' where you update the content of #header like follows:
$('#header').html("<%= escape_javascript(render 'layouts/header') %>").trigger('show');
Then call dropdown on the element in the show event handler in your javascript:
$(document).ready(function(){
$(document).on('show', '#header', function() {
$('#publish').dropdown();
});
});