Jquery click event not working when content is overwritten with ajax

Question

I 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> 

Inside the div there is a piece of content that has “content” as its identifier. Inside, I have a div. What is display: none bydefault, and if the user clicks the help button, I do

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

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

This works well until I make an ajax request to update the content div id = 'content' I am rewriting the same help topic with the same content. this is how I rewrite the entire content area except the header and footer.

but after updating it with the response text, the click event at the top of the code that is inside the .ready document does not work when onclick is working on this div

I mean, it works well. without it, when clicking and with this document code prepared above, it does not work when overwriting from ajax.

From my experience, javascript code or links do not work when code with script tags src and script is dynamically loaded and updated using ajax.

Now I use onclick instead of this 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 you need to update all attached events when you update it using ajax.

Please post 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)

since version 1.9, .live () is deprecated.

Then you can use http://api.jquery.com/delegate/

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

Answer 2

Try:

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

instead:

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

Answer 3

Live is out of date. You must use on .

$ (document) .on ("click", "selector", function () {

is an active / delegated format.

http://api.jquery.com/live/

Answer 4

And now it 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() { /* ... */}