JavaScript/jQuery 提交函数/AJAX 调用可以从控制台运行，而不是从链接文件运行

Question

我尝试过查看至少十几个有关 AJAX/jQuery 失败的问题，但似乎都不是我的问题。

我有一个网站，它依赖 AJAX 调用在用户登录和交互时加载不同的部分。后端全部用 PHP 编写。据我所知，一切都正常，但不知何故，在上网几周的过程中，一些随机的事情停止了工作。被黑了？只是错误？我不知道。该功能在我部署时已经经过充分测试并正常运行。

我暂时在 Firefox 和 Chrome 中测试它。

首先:我有一些表单，根据用户的选择，在提交时加载其他表单。在最后一个表单的末尾还有一个提交按钮。它们都使用 POST(这是我的问题吗？太多提交函数/AJAX 调用同时运行？)。

如果我在页面上，打开控制台，然后复制/粘贴代码以这种方式运行它，它就会完全按照预期执行。

当我将代码放在它自己的文件中并包装在 $(document).ready(function() { 中时，它会失败，日志中没有任何警告或错误。

如果我将它与其余 JS 一起放在 .JS 文件中，它也会失败且没有任何信息。

        $('#take_att').submit(function(e) {
            e.preventDefault();

            $.ajax({
                url: 'tools/attendance.php',
                type: 'POST',
                data: $('#take_att').serialize(),
                success: function(data) {
                    $('#controls').empty();
                    $('#controls').append(data);
                }
            });
        });

它不会阻止默认(因此它让表单提交)并因此刷新页面(因为action='')。

如果不组合许多不同文件的 HTML 并模拟表单输入，我就无法真正制作 JS fiddle ，而且不幸的是无法提供登录访问权限。

预先感谢您提供任何见解!

Answer 1

这是有原因的，既然你说表单是通过ajax加载的，你需要使用event delegation 。由于当您的 dom 就绪处理程序被触发时，表单是通过 ajax 加载的，因此表单可能尚未加载到 dom，因此选择器 $('#take_att') 可能不会返回任何元素，因此提交处理程序不会附加到表单中。

jQuery(function ($) {
    $(document).on('submit', '#take_att', function (e) {
        e.preventDefault();

        $.ajax({
            url: 'tools/attendance.php',
            type: 'POST',
            data: $('#take_att').serialize(),
            success: function (data) {
                $('#controls').empty();
                $('#controls').append(data);
            }
        });
    });
})