Question

我创建了一个列出表中信息的页面，这些信息来自数据库，并且是用户特定的，用户可以删除信息。我有以下HTML（现场更多行）：

<table>
  <tr>
    <td>INFORMATION TYPE 1</td>
    <td><img src="img/delete.gif" class="delete" id="8934" /></td>
  </tr>
  <tr>
    <td>INFORMATION TYPE 2</td>
    <td><img src="img/delete.gif" class="delete" id="1234" /></td>
  </tr>
</table>

这个jQuery脚本：

$(document).ready(function(){
  $('img.delete').click(function(){
    $.ajax({
      type: 'GET',
      url: 'inc/ajax.php',
      data: 'script=delauth&aid='+ $(this).attr('id'),
      success: function(){
        $(this).parent().parent().remove();
      }
    });
  });
});

当我点击删除图像时，PHP脚本被调用并按预期执行，记录将从数据库中删除，但是表格仍然存在。

如果我使用此代码（没有ajax-call）：

$(document).ready(function(){
  $('img.delete').click(function(){
    $(this).parent().parent().remove();
  });
});

当我点击删除图片时，tablerow会自行删除。

据我所知，该功能无法使用该对象。我已尝试提醒id而不是删除tablerow但是alertmessage说 undefined 。

我做错了什么？有人可以帮帮我吗？

谢谢！

Answer 1

在调用ajax成功时，这可能是一个问题。将代码更改为：

$(document).ready(function() {
    $('img.delete').click(function() {
var $this = $(this); //Store the context of this in a local variable 
        $.ajax({
            type: 'GET',
            url: 'inc/ajax.php',
            data: 'script=delauth&aid=' + $this.attr('id'),
            success: function() {
                $this.closest("tr").remove(); //This is much better
                //$this.parent().parent().remove();
            }
        });
    });
});

Answer 2

因为成功回调函数$(this)内部不再引用被点击的元素。 this代表窗口对象（Web浏览器中的全局）。所以你能做的就是

$(document).ready(function(){
  $('img.delete').click(function(){

    var that = this;
    $.ajax({
      type: 'GET',
      url: 'inc/ajax.php',
      data: 'script=delauth&aid='+ $(this).attr('id'),
      success: function(){
        $(that).parent().parent().remove();
      }
    });
  });
});

详细了解javascript中的闭包。

AND BTW，这里也存在问题

<td><img src="img/delete.gif" class="delete" id="8934" /></td>

id标识符不能以数字开头。因此，您应该将其更改为id="del-8934"

试图删除表行+数据库记录

2 个答案: