jquery click event does not work when content is overwritten using ajax

Question

I have explained the problem below this code

<div id='content'>

<div id='help'>
blah blah blah
once there lived a king named midas
blah blah blah
</div>

<script>
$(document).ready(function() {
    $('#help').click( function () {
          $('help').hide(500);
     })
})
</script>

<!-- bottom of the page after a long other content -->
</div>
<!-- end of div id= content -->

<script>
function ondelete()
{
// doing an ajax request to after deleting some items to dynamically update a list.
// the result will also have the same above div code with that help div
   document.getElementById('content').innerHTML = xmlHTTP.responseText
}
</script>

There is a content part inside a div which has 'content' as its id Inside that i have a help div. Which is display:none bydefault and if the user clicks the help button i do a

$('#help').show(500);

and when the user clicks the same help button or if the user clicks inside the help div then i do this code to hide that div $('#help').hide(500)

This is working well until i do an ajax request to update the content of div id='content' I am overwriting the same help div with the same content. it is like i am overwriting the entire content area except the header and the footer.

but after updating it with the response text the click event at the top of code which is inside the document.ready is not working where as onclick is working on that div

i mean is working well. without that on click and with that above document ready code it is not working when overwritten from ajax.

From my experience javascript code or links is not working when a code with script src tags and script tags are dynamically fetched and updated using ajax.

Now i am using onclick instead of that document ready to hide and show the help div.

and above all

when there is a overwrite from ajax if you again set
$(#'help').click = .... code
this works.

like 
function ondelete()
{
   document.getElementById('content').innerHTML = xmlHTTP.responseText
   $('#help').click (function() { $('#help').hide(500); });
}

so it seems that you have to update all the attached events when you update it using ajax.

Please put your comments and suggestions to overcome this.

Answer 1

try using .live().

$(document).ready(function() {
    $('#help').live('click', function () {
          $(this).hide(500);
     });
});

.live( eventType, handler )

as of version 1.9, .live() has been deprecated.

You then can use http://api.jquery.com/delegate/

Attach a handler to the event for all elements which match the current selector, now or in the future.

Answer 2

Try:

$('#help').live('click', function() { 
    // ...
});

instead of:

$('#help').click(function() { 
    // ...
});

Answer 3

And it really now works as expected:

$(document).on("click","#id_of_anything_div_input_button_etc", function () {
old_body_of_functon_called_right_here(); });

function old_body_of_functon_called_right_here() { /* ... */}