Question

我有这条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需要一些培训！

EDIT 将代码更改为：

$('.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

Answer 1

您需要将您的成功代码包装在匿名函数中，此时它将立即运行，还将$(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() }, 
})
});

在旁注中，您应该使用{j} 1.7 .on {j} 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() }, 
    })
});

preventDefault不适用于jQuery.live

1 个答案: