小编典典

使用jQuery / Ajax提交表单仅每隔一次即可

ajax

我正在尝试提交一个包含通过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,它会修复上传器,但显然会破坏我的链接,因此我正在寻找解决方法。

有任何想法吗?


阅读 282

收藏
2020-07-26

共1个答案

小编典典

试试这个:

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

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

2020-07-26