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 で読み込まれますが、アップローダーは 1 回おきにしか機能しません。

たとえば、アップローダーは #content-right で upload-song.php をロードし、すべてを完全に処理します。その後、ページから離れて別のアイテムをアップロードしようとすると、機能せず、ページが更新されるだけです。 (action="upload-song.php" を form タグに入れると、#content-right ではなく、upload-song.php をページ全体として読み込みます)。ページを更新した後、別のアイテムをアップロードすると、完全に機能します。

Ajaxスクリプトをフォーム送信に添付する方法に関係していると思います（ページを更新すると完全に機能するため）が、これらの言語の経験があまりないため、よくわかりませんそれを修正する方法。

さらに、YUI.Pjax を無効にすると、アップローダーは修正されますが、明らかにリンクが壊れるので、回避策を探しています。

何か案は？

4

1 に答える 1

5

これを試して：

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

この構文により、送信イベントがドキュメントにバブルアップします。これにより、#content_rightセクションがリロードされたときに、ドキュメントはDOMready関数で設定されたイベントリスニング応答を保持します。

于 2013-02-07T01:04:41.697 に答える