javascript - ajax リンクに割り当てられた再バインド アクション

Question

投稿を削除するためのリンクがあります。

<a id="post_232_destroy" class="postDestroy" rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/someurl">Delete</a>

javascript (coffescript からコンパイル):

function() {

  jQuery(function() {
    return $("a.postDestroy").bind("ajax:success", function(event, data) {
      $('#post_' + data.post_id).remove();
    }).bind("ajax:error", function() {
      alert('Please try again');
    });
  });

}).call(this);

ajax 経由で新しい投稿を追加しているため、最近追加された投稿ごとに [削除] ボタンにバインドできません。投稿は削除されますが、ajax:success は呼び出されないため、div は削除されません。どうすれば再度バインドできますか?

Answer 1

新しい投稿を追加するたびに、すべての投稿をバインド解除してから再度バインドできます。

$("a.postDestroy").unbind("ajax:success");
$("a.postDestroy").unbind("ajax:error");
$("a.postDestroy").bind("ajax:success", function(event, data) {
  $('#post_' + data.post_id).remove();
}).bind("ajax:error", function() {
  alert('Please try again');
});
});

編集:「バインド」の代わりにjqueryの「ライブ」関数を使用してみてください:

$("a.postDestroy").live("ajax:success", function(event, data) {
  $('#post_' + data.post_id).remove();
}).live("ajax:error", function() {
  alert('Please try again');
});
});