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。