Question

I know I need to use the . something like .live to get this to work but I am just confusing a h3ll here.

I have a list of data being pulled from a DB. Each Item has a form attached to it for deleting the item from the database.

OK here is the submit function for the form:

$(document).delegate('#delete_cat_form','submit', function() {

    var cat = $('#cat-name-imput').val(),
    id  = $('#cat-id-imput').val();

        $.post("ajax.php", {name:cat,id:id,action:'delete_cat'}, function(data){

                //Display a brief message!
                $("#message").fadeIn(3000).html(data);

                $("#message").fadeOut(3000).html(data);

                refreshMenu(); // Refresh Menu                      
            });

    return false;

});

The refresh menu function is this:

function refreshMenu(){

    $('.menu-million-dollar-wrapper').load('ajax.php', {action:'refreshMenu'}, function(data){

    });

}

Functions work on the initial load of the document but only once. After the ajax returns an update query from ajax.php it seems that all event handlers are gone and nothing works again.

I have tried reading some other answers that seem to be the same as might but I just can’t grasp the concept for some reason.

How can I do a query for new content and display it and at the same time not loose any event handlers?

Here is what ajax.php returns when called.. This is raw but I have confirmed that it does return the same exact HTML but updated with fewer and more items

 <form class="edit-button" method="post" action="'.$_SERVER['PHP_SELF'].'">
    <input type="hidden" name="name" value="'.$row['name'].'"/>
    <input type="hidden" name="id" value="'.$row['id'].'"/>
    <input type="hidden" name="action" value="delete_cat"/>
    <input type="submit" value="Delete"/>
</form>

$_SERVER['PHP_SELF'] is not correct but should not play a role in this problem.

This is the same code that is used to initially show the form on load as well.

Answer 1

Try changing all your elements to classes instead of IDs, since you mentioned that there are more than one.

$(document).on('submit', '.delete_cat_form', function() {
    var self = $(this);

    var cat = self.find('.cat-name-imput').val(),
    id  = self.find('.cat-id-imput').val();