2

別のjqueryコードによってhtmlに挿入されたフォームをエコーするphpコードがあります。これはすべてうまくいきます。このフォームを ajax で送信しようとしています。

echo '<form id="comment_form" action="commentvalidation.php?PhotoID='.$_GET['PhotoID'].'" method="POST">';
echo '<label>Comment: </label>';
echo '<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>';
echo '<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >';
echo '</form>';

伝統的に送信された場合、フォームは正常に機能します。問題は、それを ajax で送信できないことです。.submit は、デフォルトのアクションを妨げません。

<script>
$(function(){

        $('#comment_form').submit(function() {
          alert("we are in");

                    $.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
                        $('#comment_form').html("<div id='message'></div>");
                    });
            //Important. Stop the normal POST
            return false;
        });
});

</script>
4

2 に答える 2

1

フォームがページに挿入される前に、送信イベント ハンドラーをバインドしている可能性があります。たとえば、直接バインディングの代わりにイベント委任を使用します。

$(document.body).on('submit', '#comment_form', function(e) {
    e.preventDefault();
    alert('We are in');

    // and the rest, no need for return false
});

補足として、PHP から大量の HTML をエコー出力しないようにしてください。必要に応じて PHP コンテキストに切り替えると、はるかに読みやすくなり、引用符や連結で問題が発生する可能性が低くなります。

// break out of the PHP context
?>
<form id="comment_form" action="commentvalidation.php?PhotoID=<?= htmlspecialchars($_GET['PhotoID']) ?>" method="POST">
<label>Comment: </label>
<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>
<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >
</form>
<?php
// and back to PHP
于 2013-07-26T04:09:19.710 に答える
0

問題は、という事実にあるようform that was inserted into my html by another jquery codeです。このことから私が理解したところ、フォームはページが読み込まれた後に動的に作成されました。

その場合、submitハンドラー登録コードが実行されたときに要素が dom 構造に存在しませんでした。これは、ハンドラーがフォームに登録されなかったことを意味します。

これを解決するには、委任されたイベント ハンドラーを使用してみてください

$(function(){

        $(document).on('submit', '#comment_form', function() {
          alert("we are in");

                    $.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
                        $('#comment_form').html("<div id='message'></div>");
                    });
            //Important. Stop the normal POST
            return false;
        });
});

デモ:問題
デモ:解決策

于 2013-07-26T04:10:22.570 に答える