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

Question

我花了很多时间来寻找这个，也许我没有正确地解决这个问题，但是我试图在单击一个提交之后进行.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，然后执行而不刷新整个页面。

任何建议或方法将不胜感激。

提前致谢！

Answer 1

委托执行提交操作以对将来将要加载的内容执行。 默认情况下，普通事件处理程序附加到DOM上加载的内容，而不是将来将要加载的内容，例如通过Ajax。 您可以使用jQuery“ on”功能来委托对将来将要加载的内容的操作。

例如。

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

Answer 2

我在使用ajaxForm n all时遇到了类似的问题。 我必须使用$（“＃Form”）。validate（）; 为此，页面不会刷新