Question

I have an AJAX call as such :

    $('a.delete_task').live('click', function() {
      $this = $(this);

      function deleteFunction(){            

        var obj = $this.parents('.task');
        $(obj).addClass('highlighted');

        $.post($this.attr('href'), { _method: 'delete' }, function(data) {
          if ( $single_item_collection == true ) {
          } else {
          };
        });
      };

      SSK.confirm_delete($this, deleteFunction, "task");
      return false;
    });

And then I take my deleteFunction() and throw it into the delete_confirmation :

$(function(){
  window.SSK = new(Class.extend({
  confirm_delete: function(obj, action, label){
    $(".confirm-deletion").live("click", function(){
      action.call(obj);
      $(this).parents("#delete-message").fadeOut();
      return false;
    });
  }, 

The problem is that when I click it the first time it works. When I click it the second time, it passes through the first $(this), and the second $(this). Likewise, when I click another item for a third time, it tries and pass all three and so on.

Somehow it is caching $(this). As crazy as that is. And passing it everytime the method is passed again.

Confirm delete as a function creates a popup and passes the method of the link you originally clicked to it as the variable obj.

Then if you click confirm it does this :

    $(".confirm-deletion").live("click", function(){
      action.call(obj);
      $(this).parents("#delete-message").fadeOut();
      return false;
    });

Answer 1

You are adding a click event to the element ‘confirm-deletion’ every single time the user clicks ‘delete_task’. That’s why the click event is firing multiple times, it’s literally been added multiple times.