0

これを探すのにかなりの時間を費やしましたが、これに正しくアプローチしていない可能性がありますが、送信をクリックした後に .submit および .post しようとしています。他の例では、更新せずに ajax 送信を適切に機能させることができましたが、この方法で実行すると機能しません。その理由を知りたいです。

形

<form id="search" action="process.php" method="post">
    Name: <input id="search_text" type="text" name="name" />
    <input type="submit" value="Submit" />
</form>

アヤックス

$('#search').submit(function() {
    $.post(
      $(this).attr('action'),
      $(this).serialize(),
      function(data){
        $('#page_nav').html(data.html_page_nav);
        $('#results').html(data.table_html);
      },
      "json"
    );
    return false;
});

これは機能し、リロードせずに送信されます

以下は私が問題を抱えている場所です。

PHPサーバー側では、送信できるようにしたいhtmlを送り返しています。最初の検索では、元のhtmlページに入れられます。

$html_page_nav = "
    <ul>
";
for($i=1; $i <= get_query_pages(get_query_count($query), 50); $i++) {
    $html_page_nav .= "
        <li>
            <form id='page_".$i."' action='process.php' method='post'>
            <input type='hidden' name='action' value='change_page'/>
            <input type='hidden' name='page' value='".$i."'/>
            <input type='submit' value='".$i."'>
            </form>
        </li>
    ";
}   
$html_page_nav .= "
    </ul>
";

上記と同じことをしようとしていますが、送信が正しく機能しません

            $(document).ready(function() {

                $('#page_1').submit(function() {
                    console.log("this will not display");
                    $.post(
                            $(this).attr('action'),
                            $(this).serialize(),
                            function(data){
                            },
                            "json"
                        );
                        return false;
                })
            ...other jquery
            });

この送信は正しく機能せず、function() は実行されず、通常の送信のように送信され、ページ全体を更新せずに実行されるのではなく、URL に移動します。

提案やアプローチは大歓迎です。

前もって感謝します！

4

2 に答える 2

1

今後ロードされるコンテンツに対して実行する送信アクションを委任します。デフォルトでは、通常のイベント ハンドラーは DOM に読み込まれるコンテンツにアタッチされますが、将来 (たとえば Ajax を介して) 読み込まれるイベント ハンドラーはアタッチされません。jQuery の「on」関数を使用して、将来ロードされるコンテンツに対するアクションを委任できます。

例えば。

$('body').on('submit', '#page_1', function() {
  // do it here
});
于 2013-06-08T19:23:46.160 に答える
0

ajaxForm n all を使用して同様の問題が発生しました。$("#Form").validate(); を使用しました そのため、ページは更新されません

于 2013-06-08T20:27:29.743 に答える