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就绪函数中设置的事件侦听响应。

使用jQuery / Ajax提交表单只能每隔一段时间运行一次

1 个答案: