Question

我有一个使用while循环创建的列表，当用户单击删除按钮时，ajax用于删除数据库中的条目并重绘列表。这一切都正常，直到用户尝试删除另一个项目，按钮什么都不做，没有错误，让它工作的唯一方法是刷新页面。

我已经更改了ajax，所以它返回的是一个与原始类相同的按钮，看看我是否至少可以触发警报，除了nope之外别无其他。

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回调更新DOM后重新绑定click事件处理程序。

ajax创建的表单不会触发ajax调用

1 个答案: