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 にはトレーニングが必要です。

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"
    })
});

そして、私はまだ同じ問題を抱えています。.live を .on に置き換えようとしましたが、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 に答える