php - 使用 jQuery/Ajax 提交表单只能每隔一段时间有效

Question

我正在尝试提交一个包含通过 Ajax/jQuery 上传文件的表单，通过 PHP 脚本处理该表单，然后将结果返回到表单最初所在的 div 中。

我当前的表单代码是:

<section id="content-right">
<form name="uploader" id="uploader" method="POST" enctype="multipart/form-data">
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="10485760" />
    <input type="file" name="fileselect" id="fileselect" />
    <input type="submit" name="submit" id="submit" value="Upload" />
</form>
</section>

我当前的 Ajax/jQuery 脚本是:

<script> 
$(function() {
$('#uploader').submit(function() { 
        $(this).ajaxSubmit({
            type: $(this).attr('method'),
            url: 'upload-song.php',
            success: function(response) {
                $('#content-right').html(response);
                }
            }); 
    return false; 
    });
});

我的 PHP 脚本是“upload-song.php”(细节无关紧要)。

我还运行了 YUI.Pjax 来处理正常的导航(a href)链接并将它们加载到#content-right(如果用户单击任何内容，我希望它加载到#content-right)。

通过此设置，正常链接的导航工作完美，所有内容都加载到#content-right，但 uploader 仅每隔一次工作。

例如， uploader 将在#content-right 中加载 upload-song.php 并完美地处理所有内容，然后如果我离开该页面并尝试上传另一个项目，它将不起作用，它只会刷新页面(如果我将 action="upload-song.php"放在表单标记中，它将加载 upload-song.php 作为完整页面，而不是在#content-right 中)。刷新页面后，我可以上传另一个项目，它会完美运行。

我认为这与我如何将我的 Ajax 脚本附加到表单提交有关(因为如果我刷新页面它会完美运行)，但我对这些语言没有太多经验所以我'我不确定如何修复它。

此外，如果我禁用 YUI.Pjax，它会修复 uploader ，但显然会破坏我的链接，所以我正在寻找解决方法。

有什么想法吗？

Answer 1

试试这个:

$(document).on("submit", "#uploader", function() ...

此语法将使提交事件冒泡到文档。这样，当 #content_right 部分重新加载时，文档会保留在 DOM 就绪函数中设置的事件监听响应。