jQuery AJAX 将提交的表单替换为表单（好），但不会再次提交

Posted 2023-02-22

【中文标题】jQuery AJAX 将提交的表单替换为表单（好），但不会再次提交

【英文标题】：jQuery AJAX replaces submitted form with form (good), but it wont submit a second time

【发布时间】：2013-02-16 15:39:44

【问题描述】：

我在 php 中使用循环在 CMS 的管理部分中为用户显示数据。每行（用户）都包含一些我想连接到命令的图标（例如：编辑、删除等）。表格的最后一行包含带有单个图标（命令）的空输入字段，以允许添加新用户。这是用户表的 html...

<div id="wrap">
<form method="post" id="form_users">
    <div class="table">
        <div class="row header">
            <div class="columns icons"></div>
            <div class="columns data">Username</div>
            <div class="columns data">First Name</div>
            <div class="columns data">Last Name</div>
            <div class="columns data">Email</div>
            <div class="clear"></div>
        </div><!-- .header -->
        <div class="row odd">
            <div class="columns icons">
                <input type="hidden" name="userID" value="0000000010" />
                <input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
                <a href="?action=edit&userID=0000000010" class="edit"></a>
            </div>
            <div class="columns data">admin</div>
            <div class="columns data">david</div>
            <div class="columns data">kirkland</div>
            <div class="columns data">[e-mail]</div>
            <div class="clear"></div>
        </div>
        <div class="row even">
            <div class="columns icons">
                <input type="hidden" name="userID" value="0000000001" />
                <input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
                <a href="?action=edit&userID=0000000001" class="edit"></a>
            </div>
            <div class="columns data">coolguy</div>
            <div class="columns data">john</div>
            <div class="columns data">doe</div>
            <div class="columns data"></div>
            <div class="clear"></div>
        </div>
        <div class="row new">
            <div class="columns icons">
                <input type="image" src="../img/icons/save_16.png" name="submit" value="new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][username]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][first_name]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][last_name]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][email]" value="" maxlength="30" class="field new" />
            </div>
            <div class="clear"></div>
        </div>
    </div><!-- .table -->
</form>

单击其中一个图标时，我正在使用 jQuery / AJAX 将命令发送到服务器。响应是从<form> 更新到</form> 的用户表。这是 jQuery...

<script type="text/javascript">
    $(function()

        $('input[name=submit]').click(function(event)

            event.preventDefault();

            // setup array
            var values = ;

            // which submit button was clicked
            var submit_type = $(this).val();

            if( submit_type=='new' )

                $('form input:not(input[name=submit])').each(function()
                    values[this.name] = $(this).val();
                );

            else

                $(this).siblings().not('input[name=submit]').each(function()
                    values[this.name] = $(this).val();
                );

            

            $.ajax(
                type: "POST",
                url: "ajax.users.php",
                data:  action: submit_type, data: values 
            ).done(function( response ) 
                $('#wrap').html(response);
            );

        );

    );
</script>

一切都适用于第一个动作。我可以使用上面的代码删除或添加用户。单击该图标将数据发送到 AJAX。 AJAX 运行适当的查询并重建用户表。该响应返回到第一个文件，并且 users 表被新的 users 表替换而无需刷新。一切都很好，直到我尝试第二个操作。

第二次点击什么也不做。第三次单击会导致整个页面重新加载，并且该操作再次起作用。例如，我转到页面并单击以删除用户。它们被删除。我单击删除另一个用户。什么都没发生。我再次点击。页面重新加载并被删除。

我不确定这是否重要，但我在第一次加载页面时使用 PHP 包含来包含我的 AJAX 提交到的同一文件。此文件生成“用户表”。

<div id="wrap">
<?php include 'ajax.users.php'; ?>
</div>

我已经搜索了所有内容，但找不到与这种情况完全相关的任何内容。我似乎无法为谷歌提供正确的关键字组合来获得我正在寻找的答案。任何帮助将不胜感激。

【参考方案1】：

$('input[name=submit]').click(function(event) 仅绑定到在调用 .click 时存在的输入。使用事件委托。

$("#wrap").on('click', 'input[name=submit]', function (event) 

【讨论】：

天哪，这是一个快速的答案......而且它有效。太感谢了！我喜欢 ***，非常感谢您的帮助。我花了太长时间试图解决这个问题。只要 *** 允许我，我就会接受你的回答。你回答得太快了，我什至还不能正式接受。

【参考方案2】：

您的 javascript 将 click 事件的事件处理程序附加到与“input[name=submit]”选择器匹配的任何元素，但仅在页面加载后执行一次。

这意味着与选择器匹配的任何其他表单都不会附加此处理程序，因为您需要委托事件处理程序。

$(document).on("click","input[name=submit]",function() ...); 

理想情况下，您应该使用一个类来识别应该以这种方式运行的提交按钮，否则每个提交按钮都将使用相同的处理程序。