使用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来处理正常导航(一个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() ...

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