预防默认不适用于 jQuery.live

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需要一些培训！

---

编辑将代码更改为：

$('.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() }, 
})
});

附带说明一下，您应该使用.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() }, 
    })
});