Rebind dymanically created forms after jQuery ajax response

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;
    });
});

});

PetersenDidIt · Answer 1 · 2010-05-02T21:11:46.587

4

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.

edited May 02 '10 at 21:11

answered May 02 '10 at 21:05

PetersenDidIt

25,562
3
67
72

Good answer. `live()` works as a way to attach an event in such a way that it will work for code that is injected into the DOM after page load. See: http://api.jquery.com/live/ – artlung May 02 '10 at 21:08
1

`delegate()` is the new better faster version of `live()` if your lookin' for performance. – Alex Sexton May 02 '10 at 21:09
@perter Thanks but that did not work. It still tries to submit the form. – Panama Jack May 02 '10 at 21:15
Accoding to the link about live you can't use it for submits. "In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. " Any other suggestions?? – Panama Jack May 02 '10 at 21:18
You can upgrade to 1.4 (recommended) or re-bind the submit event every time you reload the forms – PetersenDidIt May 02 '10 at 22:06
@perter I'm already using 1.4.2. and it still doesn't work for me. Any ideas? It will not work with .live there for me. :/ How do I re-bind every time I reload the forms then? – Panama Jack May 02 '10 at 22:16
Ahh.. I've been pulling out my hair to find out it's a bug in jQuery 1.4.2 http://dev.jquery.com/ticket/6359 When I revert back to 1.4.1 it works perfectly. @peter thanks for help. – Panama Jack May 02 '10 at 23:28

score 0 · Answer 2 · answered May 02 '10 at 21:44

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

Panama Jack · Answer 3 · 2010-05-02T22:48:59.920

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

This works fine using the event.preventDefault(); But doenst work in IE with 1.4.2. Use 1.4.1 until its fixed in the next version. http://dev.jquery.com/ticket/6359 — Panama Jack, May 02 '10 at 23:29

Rebind dymanically created forms after jQuery ajax response

3 Answers3

Linked