AJAX創建的窗體不會觸發Ajax調用

Question

我有一個使用while循環創建，當用戶點擊刪除按鈕AJAX用於刪除數據庫中的條目，並重繪列表清單。這一切都正常工作，直到用戶試圖刪除另一個項目，該按鈕什麼也不做，沒有錯誤，唯一的方法是刷新頁面。

我已經改變了AJAX因此所有的返回是同一類作爲原始的按鈕，看看我至少可以得到，如果沒有別的它來觸發警報，但沒了，什麼都沒有。

的AJAX

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.trash_btn').click(function(){ 
     alert('bob'); 
    var question = $(this).next('.id_question').val(); 
    var user = '<? echo $id; ?>'; 
    alert(question+' '+user); 
     $.msgbox("Are you sure you want to delete the selected question?", { 
     type: "error", 
     buttons: [ 
      {type: "submit", value: "Yes"}, 
      {type: "cancel", value: "No"} 
     ] 
     }, function(result) { 

     if (result == 'Yes') { 
      $.ajax({ 
       url: 'ajax/opinion_del.php', 
       type:'POST', 
       data: 'question='+ question +'&user='+user, 
       success: function(response){ 
       $('#responses_table').html(response); 
      }, 
     error:function (xhr, ajaxOptions, thrownError){ 
     alert(thrownError); 
     } // End of success function of ajax form 
      }); 
     } 
     }); 
    }); 
    }); 
</script> 

表的相關部分

<td class="details"> 
     <input type="button" name="del_question" value="" class="trash_btn"> 
     <input type="hidden" class="id_question" name="question_id" value="<? echo $row['questionID']; ?>"> 
     <input type="hidden" class="id_user" name="user" value="<? echo $id; ?>" >  
</td> 

AJAX輸出創建非工作測試按鈕（最初是使用JSON但修剪出來用於測試）

$smeg = '<input type="button" value="test" class="trash_btn">'; 
echo $smeg; 

Answer 1

我建議將事件綁定更改爲委託事件處理程序而不是標準事件處理程序。發生了什麼事是，你正確地結合在網頁加載的元素，但是當您通過AJAX調用更新DOM，綁定是因爲你除去被綁定到元素丟失。

E.g.

$('.trash_btn').click(function(){ 

變爲：

$('#responses_table').on("click", ".trash_btn", function(){ 

使用委託的事件處理程序是指該事件處理程序被實際結合到#responses_table元件和火災時，它檢查在event.target引用的元件，看它是否匹配您傳入的選擇器作爲.on()的第二個參數。這樣你的事件處理程序就可以工作，即使你在DOM周圍挖掘並改變HTML也是如此。

另一種方法是通過您的AJAX回調的更新後重新綁定您的click事件處理程序的DOM。