jQuery'on'事件在'load'事件之后不起作用

Question

我有一个页面，发生了类似的事件，但是中途加载了新内容，并且当加载新内容时，很多jQuery无法正常工作。

从本质上讲，这是一个“游戏”，您在其中回答了一堆问题（通过AJAX处理），并且当回答了第一个“层”上的所有内容时，它将带您进入下一个层。 回答完所有问题后，我将“ empty（）”作为主要内容的div，然后使用它：

$('#content').load('next_page.php', function(){
$.getScript("js/new_functions.js",function(){           
        $('form.sample_form').on('submit', function(e){                                 
            e.preventDefault();
            alert('test');
        });
    });
});

它将信息加载到数据库中，并通过PHP调用了两个数据库，以填充表单中的内容。 然后，我希望表单加载后在表单上有一个提交功能。 我最初在“ new_functions.js”页面中具有“提交”功能，但这种方式无法正常工作。 我假设这是因为new_functions.js文件中有一个AJAX函数，并且该函数异步运行，因此在应用form.sample_form提交功能之前就不会设置表单（即使仅在new_functions之后才应用）。 js文件已加载）。 如果我在AJAX函数中运行Submit函数，则存在各种问题，因此无法正常工作。

所以我的问题是，只有在加载新页面，加载新功能文件并运行所有AJAX之后，才能将提交功能应用于表单。

Answer 1

对我有用的是在$ {document）.ready中设置以下所有内容

$(document).on('submit','form.firstForm', function(event){
    event.preventDefault();

    handleData();
});

 $(document).on('submit','form.secondForm', function(event){
       event.preventDefault();
       handleData();
});

另外，如果您有用于每种形式重复使用的输入插件，则将它们像这样包装起来，以便在每个ajax操作之后将它们初始化

$(document).ajaxComplete(function(event, xhr, settings) {
        $("#inputdate").pickadate();  

        $("#inputtime").pickatime();
});