Question

我有一张联署材料:

$( .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 调用。当然, 自从列表项目已经删除了, 这样的事情就会混乱起来。

我有一种感觉,这是由现场电话引起的,但我不明白为什么。我的JS-Fu需要一些训练!

EDIT changed the code to this:

$( .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替换.life, 但它甚至没有试图通过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() }, 
    })
});

友情链接