Rebind dymanically created forms after jQuery ajax

Question

I'm kinda new to jQuery but understand it for the most part. My problem is that when my ajax call which refreshes the entire div is done, all my dynamically created forms don't work. If you try and submit them, the event doens't work properly and just tries to do a normal form submit. I have all the other items such as links bound using the .live() which seem to work great. Just the form dies. How do I rebind the dynamically created forms after the ajax call? They all have id of formname_id. I tried to use bind but it doesn't work as below. Any help is appreciated.

Here is the code

jQuery(document).ready(function(){   
jQuery("form[id^='commentform_']").each(function(){

    var id = parseInt(this.id.replace("commentform_", ""));         

    jQuery(this).bind('submit', function(e) {

        var action     = jQuery('#action_' + id).attr('value');
        var act_id    = ('1');  
            jQuery.ajax({
            type: "POST",
            url: "ajax/modify.php",
            data: "action="+ action +"& act_id="+ act_id,
            success: function(response){                
             jQuery('#CommentsContainer_' + id).html(response);
             jQuery('#commentform_' + id)[0].reset();
            }           
        });      
    return false;
    });
});             

});

Answer 1

I have gotten this to work adding the event in the function call and using event.preventDefault(); BUT of course only in FF. Doesn't work in IE7..

jQuery("form[id^='commentform_']").live('submit',function(event){ 
var id = parseInt(this.id.replace("commentform_", "")); 
var action = jQuery('#action_' + id).attr('value'); 
var act_id = ('1');   
jQuery.ajax({ 
    type: "POST", 
    url: "ajax/modify.php", 
    data: {"action": action, "act_id": act_id}, 
    success: function(response){                 
        jQuery('#CommentsContainer_' + id).html(response); 
        jQuery('#commentform_' + id)[0].reset(); 
    }            
});       
event.preventDefault();});

But IE7 still tries to sumbit the action. arrgggh.. Anything I'm doing wrong??

Answer 2

Try doing something like this:

jQuery("form[id^='commentform_']").live('submit',function(){
    var id = parseInt(this.id.replace("commentform_", ""));
    var action = jQuery('#action_' + id).attr('value');
    var act_id = ('1');  
    jQuery.ajax({
        type: "POST",
        url: "ajax/modify.php",
        data: {"action": action, "act_id": act_id},
        success: function(response){                
            jQuery('#CommentsContainer_' + id).html(response);
            jQuery('#commentform_' + id)[0].reset();
        }           
    });      
    return false;
});

No need to loop over the forms to bind to them. If you can use delegate instead of live do so.

Answer 3

Why don't you over-ride the normal form submit:

    function addNewitem() {
        $('#new_item_form').submit(function() {
            $.get("includes/ItemEdit.php", {
                newItem: true
            },
            function(msg) {
                isNewItem = true;
                $("#new_item").hide();
                $('#item_list').hide();
                $("#item_edit").html( msg );
                $("#item_edit").show();
                editActiveEvent();
            });
            return false;
        });

    }

Don't forget to return false. or do a .preventDefault