在提交动态加载的表单后，我如何循环回jquery-load的第一个回调函数

Question

我删除了原始声明以显示有用的内容：

Index.html有一个按钮，当点击该按钮时，会将表单从whatever.html加载到#content-div.中

为了使我的表单能够正确工作并重新加载页面，我必须重新编写代码，以匹配正确答案背后的想法。

我仍然想声明：如果这不是应该做的，不要试图让这个代码工作，请给我指明好的方向，但这必须是动态的

谢谢

$(document).ready(function(){
$('#nav').on('click', 'button', function() {
    name = $(this).attr('name');
    loadContent(name);
})
function loadContent(button) {
    $('#content').empty();
    $('#content').load(name + ' #content > *');
}
$('#content').on('submit', function(event) {        
    event.preventDefault();
    var divid = $(this).attr('id');
    ajForm(divid);
    console.log(divid);
    $('#content').empty();
    $('#content').load('form.html #content > *');
})
function ajForm(divid){ // id = form_id, result=destination_div
    var data = $('#' + divid + ' > *').serialize(); 
    console.log(data);
        $.ajax({
            type: 'POST',
            url: 'test.php',
            data: data,
            beforeSend:function(){
                $('#result').html('loading...');
                },
            success:function(data){
                $('#result').empty();
                $('#result').append(data);
                },
            error:function(){
                $('#result').html('fuck me');
                }
            }); 
}; // ajaxForm

})；//$

Answer 1

我认为您只需要像委托按钮单击事件一样，将表单提交委托给合适的祖先元素。

jQuery(function($) {
    $('#hn-nav').on('click', 'button', loadFormsAndDatabaseContent)
    $('#main-content').on('submit', 'form', reloadMainContent);
    function loadFormsAndDatabaseContent(event) {
        ...
    }
    function reloadMainContent (event) {
        ...
    }
});

这两个函数中的代码将是您已经尝试过的代码的一些提取/修改。