0

我有一个使用 while 循环创建的列表，当用户单击删除按钮时，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;
4

1 回答 1

1

我建议将您的事件绑定更改为委托事件处理程序而不是标准事件处理程序。发生的情况是您在页面加载时正确绑定到元素，但是当您通过 AJAX 调用更新 DOM 时，绑定会丢失，因为您要删除绑定到的元素。

例如

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

更改为：

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

使用委托事件处理程序意味着事件处理程序实际上绑定到#responses_table元素，并且当它触发时，它会检查引用的元素event.target以查看它是否与您作为第二个参数传入的选择器匹配.on()。这样，即使您在 DOM 周围乱七八糟并更改 HTML，您的事件处理程序也能正常工作。

另一种方法是在通过 AJAX 回调更新 DOM 后重新绑定click事件处理程序。

于 2013-10-24T22:11:17.213 回答