遇到ajax提交重新加载问题，匿名函数未执行

Question

I spent quite a bit of time looking for this and maybe I'm not approaching this correctly, but I'm trying to .submit and .post after clicking a submit. In other instances I have been able to get the ajax submit to work properly without the refresh, but when I do it in this manner it just doesn't work. I'm curious to know why.

Form

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

Ajax

$('#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;
});

This works and it will submit without reloading just fine

Below is where I have the problem.

On the php server side I am sending back html that I want to be able to submit, which the initial search will put into the original html page.

$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>
";

I try to do the same thing as above, but the submit does not work properly

            $(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
            });

This submit will not work properly, the function() will not execute and it will submit like the regular submit and go to the url rather then execute without refreshing the entire page.

Any suggestions or approaches would be much appreciated.

Thanks in advance!

Answer 1

Delegate the submit action to execute on content which will be loaded in future. By default the normal event handlers attached to the content loaded on DOM but not the one which will gets loaded in future, say through Ajax. You can use jQuery "on" function to delegate the action on content which will load in future.

eg.

$('body').on('submit', '#page_1', function() {
  // do it here
});

Answer 2

I had a similar problem using ajaxForm n all. I jus used $("#Form").validate(); for it and the page doesnt get refresh