jQuery AJAX用表单（好）代替提交的表单，但不会再提交

Question

使用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">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> 

当一个图标被点击我使用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运行适当的查询并重建用户表。该响应返回到第一个文件，用户表被替换为新的用户表而不刷新。一切都很好，直到我尝试第二个动作。

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

我不确定它是否重要，但我使用的PHP包括第一次页面加载包括我的AJAX提交给同一个文件。该文件生成“用户表”。

​​

我已经遍地搜索，找不到与这种情况有关的任何东西。我似乎不能给谷歌正确的关键字组合来获得我正在寻找的答案。任何帮助将不胜感激。

Answer 1

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

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

Answer 2

您的JavaScript重视的Click事件的事件处理程序将匹配任何元素“输入[名称=提交]”选择，但做到这一点只有一次在页面加载后。

这意味着任何与选择器匹配的其他表单都不会将此处理程序连接到它们，因为您需要一个委托事件处理程序。

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

理想情况下，你应该使用一个类来鉴定的行为应该以这种方式提交按钮，否则每一个提交按钮将使用相同的处理程序。