ajaxの成功関数を渡す

Question

私は次のコードを開発しました。このクラスのアイテムがたくさんあるため、正確なthis値をajaxの成功関数に渡す必要があります。どうやってするか。

$(document).on('click', '.address_remove_link', function(e) { 
    var id = $(this).attr("data-id"); 
    $.ajax({ 
     type: 'POST', 
     url: 'inc/controlllers/detele_shipping_addr.php', 
     data: { 
      internalId: id 
     }, 
     success: function(response, this) { 
      $(this).parent().closest('div').hide(200); 
     }, 
     error: function(data) { 
      console.log("error"); 
     } 
    }); 
}); 

Answer 1

ので、問題があります範囲thisは、successハンドラ関数内で変更されました。代わりにクリックハンドラ関数に外側スコープを格納することができます。これを試してみてください：

$(document).on('click', '.address_remove_link', function(e) { 
    var $link = $(this); // store reference here 
    var id = $link.attr("data-id"); 

    $.ajax({ 
     type: 'POST', 
     url: 'inc/controlllers/detele_shipping_addr.php', 
     data: { 
      internalId: id 
     }, 
     success: function(response) { 
      $link.parent().closest('div').hide(200); // to use here 
     }, 
     error: function(data) { 
      console.log("error"); 
     } 
    }); 
}); 

Answer 2

一つの簡単な方法は、関数がオーバー閉じ変数を使用することです：

$(document).on('click', '.address_remove_link', function(e) { 
    var $this = $(this);         // *** 
    var id = $this.attr("data-id");      // *** 
    $.ajax({ 
     type: 'POST', 
     url: 'inc/controlllers/detele_shipping_addr.php', 
     data: { 
      internalId: id 
     }, 
     success: function(response) { 
      $this.parent().closest('div').hide(200);  // *** 
     }, 
     error: function(data) { 
      console.log("error"); 
     } 
    }); 
}); 

代わりにあなたがFunction#bind（MDN、spec）を使用することができます

$(document).on('click', '.address_remove_link', function(e) { 
    var id = $(this).attr("data-id"); 
    $.ajax({ 
     type: 'POST', 
     url: 'inc/controlllers/detele_shipping_addr.php', 
     data: { 
      internalId: id 
     }, 
     success: function(response) { 
      $(this).parent().closest('div').hide(200); 
     }.bind(this),          // *** 
     error: function(data) { 
      console.log("error"); 
     } 
    }); 
}); 

Answer 3

あなたがself変数を作成し、このようにそれを使用することができますので、あなたは、クリックイベントハンドラ関数のスコープに取り組んでいる：

$(document).on('click', '.address_remove_link', function(e) { 
    var self = $(this), 
     id = self.attr('data-id'); 

    $.ajax({ 
     type: 'POST', 
     url: 'inc/controlllers/detele_shipping_addr.php', 
     data: { 
      internalId: id 
     }, 
     success: function(response) { 
      // Do something with "response" 
      self.parent().closest('div').hide(200); 
     }, 
     error: function(data) { 
      console.log('error'); 
     } 
    }); 
});