getting reference of this in jquery ajax handler

getting reference of this in jquery ajax handler References I am trying to toggle and refresh content of div based on return code of jquery ajax request. I believe I am NOT able to tie \"item\" properly with the ajax request handlers. How can I get reference to \"this\" inside \"success\" handler? I think its because success handle is executed async and the \"item\" variable is in zombie state. I have two divs starting with add on it When I click add on any div, it fires the ajax req, server handles it and returns success/error Upon success, I toggle add to remove on the div Same toggle happens if I click on remove After few clicks on both divs, I observe my ajax requests are fired 3 -4 times for a single click on either add/remove I think the way I am adding div in to \"item\" maybe the issue. I dont know what is wrong. I am thinking of how to write a jsfiddle for this. I am able to write a jsFiddle and reproduce the prolem. I have mentioned use case above for what my desired behavior is. jsfiddle http://jsfiddle.net/nEMvD/14/ JS: function handleAdd() { $(\".add\").click(function(e) { var item = $(this).parents(\".item\") $.ajax({ url: \'/echo/html\', success: function(data) { item.find(\".add\").remove() item.append(\"

x

\") item.hide().show(); handleRemove() } }) }); } function handleRemove() { $(\".remove\").click(function(e) { var item = $(this).parents(\".item\") $.ajax({ url: \'/echo/html\', success: function(data) { item.find(\".remove\").remove() item.append(\"

+

\") item.hide().show(); handleAdd() } }) }); } $(function() { handleAdd() handleRemove() })