Search code examples
jqueryajaxbindingdynamic-rebinding

Re-binding an ajaxForm after content re-loads with ajax (jQuery 1.4.2)

I'm trying to figure out why this is a problem when using jQuery 1.4.2 and not 1.3.2.

This is my function:

function prepare_logo_upload() {
    $("#logo-upload-form").ajaxForm({
        //alert(responseText);                                       
        success: function(responseText) {
            //alert(responseText);                                          
            $('#profile .wrapper').html(responseText);
            prepare_logo_upload();
        }
    });
}

Every other live event works but can't use the .live() method because ajaxForm is a plugin. I have noticed this also for other types of binding (clicks) using the old form (re-binding after callback)

Can you tell me if it is a way of solving this?

This is a similar question, but due to my newbie reputation here, can't comment or ask a question there, so I'll ask a new one here. -> jQuery: Bind ajaxForm to a form on a page loaded via .load()

Thank you!

EDIT: The "#profile .wrapper" contains the form, so my problem is in getting it re-binded with the events after it reloads.

Solution

  • Just a guess but, something like this?

    
$("#logo-upload-form").live("submit", function () {
    return (function () {
        jQuery(this).ajaxForm({
            //alert(responseText);                                       
            success: function(responseText) {
                //alert(responseText);                                          
                $('#profile .wrapper').html(responseText);
                // recursion 
                return arguments.callee();
            }
        });
    }());
});

    Completely untested, btw.