jquery functions not working properly after .html reload

Question

I have a page with a list of items initially loaded from a include_once('show_calendarV2.php'); line.

Next to each item is a delete icon that triggers the following jquery to delete the item from the db and then update the page.

$('.delete_schedule_item').click( function() {
     var id = $(this).next('input[type=hidden]').attr('value');
     alert ( id );

     $.ajax({
          url: 'ajax/delete_schedule_item.php',
          type: 'post',
          data: { id: id },
          dataType: 'json', // get back status of request in JSON
          success: function(data) 
       {
        //alert( 'item deleted' );
       }
         //           if (data.status) {
         //      alert('success');
         //          }
         //          else {
         //    alert('error');
         //   },
         //... other parameters/callbacks ...
         });

     $.get('show_calendarV2.php', {},      
        function(data) 
        {
     //load the calendar data
     $("#calendar").html( data );

       });
    });

Everything works fine the first time an item is deleted. The item is deleted. The new page loads.

But after the page loads the delete buttons? jquery calls? no longer function.

The same page is used to create the initial display as well as the refreshed one so am not sure why the code fails.

Ideas?

Answer 1

Try changing

$('.delete_schedule_item').click(function() {

to

$('.delete_schedule_item').live("click", function() {

If you load a bunch of new html, the function that you ran before wouldn't apply to it anymore. And since you're loading it via Ajax, the function isn't executed again once it's done loading.

The beauty of the live() and die() functions in jquery is that they take care of this situation. Whenever something new is loaded that matches the selector, the new elements are updated automatically.

Answer 2

Use event delegation:

$('.delete_schedule_item').live("click", function() {...

Event delegation using live will automatically re-attach event handlers to newly injected elements. When you replace a section of your web page with fresh content via ajax, any event handlers bound to 'old' elements will not automatically get re-attached to the newly injected ones, unless you use event delegation (or re-attach the event handler within your ajax method's callback).

For event delegation with live to work, you will need to be using jQuery 1.3 or greater.

Answer 3

The reason that it doesn't work any more is that the event handlers are added to the DOM elements themselves. When you load new HTML via AJAX, the old elements with the event handlers attached are removed and new elements, without the handlers are substituted in their place. There are two possible solutions: first, you can reapply the handlers to the newly loaded HTML. Just re-run the code that sets up the event handler on the HTML you've loaded. The other option, which you can use in this case because the click event is handled by live, is to use live event handlers as @womp and @karim79 suggest.

Note that there are some limitations with live handlers - they don't apply to all types of events (click works) and they don't work properly with propagation (i.e., stopping propagation doesn't work). See the jQuery docs for live for more info.