提交使用jQuery / Ajax的形式只适用每个其他时间(Submitting a form wi

2019-07-19 11:39发布

我想提交一个表单,其中包括通过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>

而我现在的阿贾克斯/ 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脚本是“上载song.php”(细节并不重要)。

我也有YUI.Pjax运行处理正常航行(A HREF)链接和加载这些在#内容的权利(如果用户点击任何东西,我希望它在加载#内容右)。

有了这个设置,通过正常的链接导航完美的作品,一切载荷#内容的权利,但上传只适用所有其他时间。

例如,上载者将加载上载song.php在#内容正确和完美的处理一切,然后,如果我导航离开该页面,并尝试上传其他项目,它不会工作,它只会刷新页面(如果我把行动=“上传-song.php”的形式标记,它会加载上载song.php作为一个完整的网页,而不是在#内容右)。 它刷新页面后,我可以上传其他项目,这将很好地工作。

我认为这与我如何附上我的阿贾克斯脚本的形式提交(因为如果我刷新页面,它完美的作品)做的,但我没有很多的这些语言的经验,所以我不知道如何解决它。

另外,如果我禁用YUI.Pjax它修复了上传,但显然打破我联系,所以我在寻找一个解决办法。

有任何想法吗?

Answer 1:

试试这个:

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

这句法会让提交事件冒泡到文档中。 这样一来,当#content_right部分重新加载,文件保留了事件响应听在DOM准备功能设置。



文章来源: Submitting a form with jQuery/Ajax only works every other time