使用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中，但上传器仅每隔两次运行一次。

例如，上传者将在＃content-right中加载upload-
song.php并完美地处理所有内容，然后，如果我离开页面导航并尝试上传其他项目，它将无法正常工作，它将刷新页面（如果我将action =“ upload-
song.php”放在表单标签中，则会将upload-song.php加载为整页，而不是＃content-
right）。刷新页面后，我可以上传另一个项目，并且可以正常运行。

我认为这与我将Ajax脚本附加到表单提交有关（因为如果刷新页面，它可以完美地工作），但是我对这些语言没有太多经验，所以我不确定如何解决。

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

有任何想法吗？

Answer 1

试试这个：

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

这种语法将使Submit事件冒泡到文档中。这样，当#content_right重新加载该部分时，文档将保留在DOM ready函数中设置的事件侦听响应。