JQuery event tracking

Question

in some function I remove element like this $('#'+id+' img.load').remove(); , how can i track this event and run custom code?

Answer 1

(function($){
  var remove_orig = $.fn.remove;

  $.fn.remove = function(){
    console.log('Remove called');
    remove_orig.apply(this, arguments);
  };
})(jQuery);

You can "hook" in to any jQuery function and place your own handling code within (including logging method(s)) which will execute before the native jQuery code is executed.

demo (another version with the selector shown)

---

Catching the removal is easy using the above overload. Simply alter the hook to fire a trigger before (or after) jQuery gets to it:

(function($){
  var remove_orig = $.fn.remove;

  $.fn.remove = function(){
    this.trigger('removing');
    remove_orig.apply(this, arguments);
  };
})(jQuery);

$('#foo').bind('removing',function(e){
    alert('#foo is being removed');
});

$('#foo').remove();