3

我正在尝试提交一个表单，其中包括通过 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，它会修复上传器，但显然会破坏我的链接，所以我正在寻找解决方法。

有任何想法吗？

4

1 回答 1

5

试试这个：

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

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

于 2013-02-07T01:04:41.697 回答