0

我有这段 JS：

$('.self_delete').live('click', function(e){
    e.preventDefault();
    $.ajax({
        type: 'DELETE',
        url: $(this).attr('href'),
        success:  $(this).parent().remove(),
        dataType: "script"
    })
});

以这个 HTML 为目标：

<a href="/list_items/34" class="self_delete" data-method="delete" rel="nofollow">
    <i class="icon-trash"></i>
</a>

问题是当我点击链接时，它会首先向服务器提交 ajax 调用，然后发送正常的 HTML 调用。当然，由于 list_item 已经被删除，这会造成混乱。

我感觉这是由 live() 调用引起的，但我不知道为什么。我的 JS-Fu 需要一些训练！

编辑将代码更改为：

$('.self_delete').live('click', function(e){
    e.preventDefault();
    var self = $(this);
    $.ajax({
        type: 'DELETE',
        url: self.attr('href'),
        success:  function(){ self.parent().remove() },
        dataType: "script"
    })
});

我仍然有同样的问题。试图用 .on 替换 .live 但它甚至没有尝试通过 AJAX 提交，所以我想我必须更仔细地阅读文档:-S

4

1 回答 1

4

您需要将成功代码包装在匿名函数中，此时它将立即运行，还将引用存储$(this)在另一个变量中，例如self

$('.self_delete').live('click', function(e){
e.preventDefault();
var self = $(this); 
$.ajax({
    type: 'DELETE',
    url: self.attr('href'),
    success:  function(){ self.parent().remove() }, 
})
});

附带说明一下，您应该使用.on的 jQuery 1.7.live已被弃用。

$(document).on('click', '.self_delete', function(e){
    e.preventDefault();
    var self = $(this); 
    $.ajax({
        type: 'DELETE',
        url: self.attr('href'),
        success:  function(){ self.parent().remove() }, 
    })
});
于 2012-05-25T14:17:59.260 回答