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

理想情況下，你應該使用一個類來鑑定的行爲應該以這種方式提交按鈕，否則每一個提交按鈕將使用相同的處理程序。