Ajax表单处理问题：动态加载表单的嵌入Ajax调用失效

核心问题 #

你遇到的是动态生成元素的事件绑定失效问题：初始页面加载时，$(document).ready()里的代码仅对当时DOM中存在的#jqInstallForm表单绑定了submit事件；但当你通过Ajax加载新表单替换旧表单后，新的#jqInstallForm元素并没有被绑定事件，所以点击提交按钮无响应。

解决方案：使用事件委托 #

将事件绑定从直接绑定到表单元素，改为委托到父级元素（或document），这样即使后续动态生成的表单，也能触发事件。

修改核心代码 #

把原代码中的直接绑定逻辑：

$( jQueryInstallForm ).submit( function(e){
    // 原表单提交逻辑
});

替换为事件委托绑定：

$(document).on('submit', jQueryInstallForm, function(e){
    // 原表单提交逻辑不变
});

修改后的完整代码 #

$( document ).ready( function() {  
    var jQueryInstallForm   = "#jqInstallForm";  
    var outputContent       = "#outputContent";  
    var workingContent      = "#working";  
    var mainContent         = "#installContent";  
    // 改用事件委托绑定submit事件，兼容动态生成的表单
    $(document).on('submit', jQueryInstallForm, function(e){  
        var targetSelf = "#content";  
        var jQFormControll = "source";  
        var $controll = ( $( jQueryInstallForm ).data( jQFormControll ) ) ? "#" + $( jQueryInstallForm ).data( jQFormControll ) : targetSelf;  
        var $dest = ( typeof $( this ).attr( 'data-dest' ) === 'undefined' ) ? 'working' : $( this ).attr( 'data-dest' );  
        var $data = $( this ).serialize().replace( /(\.\.%2F\.\.)/gi, "" );  
        $( "#submit" ).prop( 'disabled', true );  
        $.ajax({  
            url:        $( this ).attr( 'action' ),  
            type:       $( this ).attr( 'method' ),  
            data:       $data,  
            mimeType:   "multipart/form-data",  
/* Create database */  
            success: function( response ) {  
                var jsonResponse = false;  
                jsonResponse = convertToJSON( response );  
                if ( jsonResponse !== false ) {  
                    response = jsonResponse;  
                } else {  
                    var response = {"html": response};  
                    $( mainContent ).html( response.html );  
                }  
                $( $controll ).append( response.html );  
                $( workingContent ).html( 'Install/setInstallStatus/1' );  
                if ( typeof response.installer !== 'undefined' ) {  
                    $.ajax({  
                        url: response.url,  
/* Create tables */  
                        success: function( response ) {  
                            jsonResponse = convertToJSON( response );  
                            if ( jsonResponse != false ) {  
                                response = jsonResponse;  
                                var result = createStatus( "Create tables", response );  
                                if ( result === "0" ) {  
                                    return false;  
                                }  
                                $( workingContent ).html( 'Install/setInstallStatus/1' );  
                            } else {  
                                var response = {"html":response};  
                            }  
                            $( $controll ).append( response.html );  
                            $.ajax({  
                                url: response.url,  
/* Upload data to database */  
                                success: function( response ) {  
                                    jsonResponse = convertToJSON( response );  
                                    if ( jsonResponse !== false ) {  
                                        response = jsonResponse;  
                                        var result = createStatus( "Load data to database", response );  
                                        if ( result === "0" ) {  
                                            return false;  
                                        }  
                                        $( workingContent ).html( 'Install/setInstallStatus/2' );  
                                        $( mainContent ).html( response.html );  
                                    } else {  
                                        var response = {"html":response};  
                                        $( $controll ).append( response.html );  
                                    }  
                                }  
                            });  
                        }  
                    });  
                }  
            }  
        });  
        return false;  
    });  
});  
function createStatus( text, response ) {  
    var $status, $class;  
    var lastChar = response.progress[response.progress.length -1];  
    if ( response.status == "1") {  
        $status = "<i>Done.</i>";  
        $class  = "Success";  
    } else {  
        $status = "<i><b>Error!</b></i>";  
        $class  = "Error";  
    }  
    $( ".outputTitle" + lastChar ).html( "<b>" + text + " (" + response.totalCount + "/" + response.count + " hiba: " + response.errorCount + "):</b>" );  
    $( "." + response.progress ).attr( 'id', 'ctrlDispMessageStatus' + $class );  
    $( "." + response.progress ).html( $status );  
    if ( response.status !== "1") {  
        $( "#submit" ).prop( 'disabled', false );  
        return "0";  
    } else {  
        return "1";  
    }  
}

额外检查点 #

• 确保动态加载的新表单id仍然是jqInstallForm，无拼写错误
• 检查新表单的action和method属性是否正确设置
• 打开浏览器控制台，排查是否有隐藏的JS错误（比如convertToJSON函数未定义等）

内容的提问来源于stack exchange，提问作者Teo76