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

Im使用PHP中的循环在CMS的管理部分为用户显示数据。每行（用户）都包含一些我想连接到命令（例如：编辑、删除等）的图标。表的最后一行有空的输入字段，带有一个图标（命令），允许添加新用户。这是users表的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">awesome@example.com</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>

用户名
名字
姓
电子邮件
管理
大卫
科克兰
awesome@example.com
酷哥
厕所
雌鹿

单击其中一个图标时，我使用jQuery/AJAX将命令发送到服务器。响应是从

到

的更新用户表。这是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>

$（函数（）{
$（'input[name=submit]'）。单击（函数（事件）{
event.preventDefault（）；
//设置阵列
var值={}；
//单击了哪个提交按钮
var submit_type=$（this.val（）；
如果（提交类型=='new'）{
$（'form input:not（input[name=submit]））。每个（function（）{
值[this.name]=$（this.val（）；
});
}否则{
$（this）.sides（）.not（'input[name=submit]'）。each（function（））{
值[this.name]=$（this.val（）；
});
}
$.ajax({
类型：“POST”，
url:“ajax.users.php”，
数据：{操作：提交类型，数据：值}
}).完成（功能（响应）{
$（'#wrap'）.html（响应）；
});
});
});

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

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

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

我找遍了所有地方，找不到任何与这种情况有关的确切信息。我似乎不能给谷歌一个正确的关键字组合来得到我想要的答案。任何帮助都将不胜感激。

$（'input[name=submit]'）。单击（函数（事件）{

仅绑定到调用

时存在的输入。单击

。使用事件委派

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

---

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

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

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

---

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

天哪，这是一个快速的答案……而且它很有效。非常感谢您！我爱stackoverflow，非常感谢您的帮助。我花了太长时间试图修复此问题。我将接受您的建议我一允许就回答。你回答得太快了，我甚至还不能正式接受。

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