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.