Question

How can I control the error handling when triggering an event with JQuery?

We’ve found that if an error is thrown in a handler function it prevents other handlers from being invoked.

Please see this fiddle.

The problem is copied below:

$(document).on('customEvent', function()
{
  thisIsUndefined.yetIDereferencedIt;
});

$(document).on('customEvent', function()
{
  // Something useful happens here.
  alert('something');
});

$(document).trigger('customEvent');

In the above example, I want the alert to be shown. As I cannot guarantee that I have full control over all of the event handlers I’d like a way to hook into trigger and handle errors per event listener.

Of course, alternative design options are welcome.

Answer 1

If event is already defined by some library, and you cannot control that event at all, I would re-trigger that event after unbind that event like the following.

http://jsbin.com/uvivat/2/edit

$("a").on("click", function() {
  Undefined.badFunc
});

var prevClickEvent = $._data($("a")[0], "events")["click"][0]["handler"];

//console.log(prevClickEvent);

$("a").unbind("click").on("click", function() {
    try {
       prevClickEvent.apply(this);
    } catch(e) {
       console.log(e);
    }
    alert("hi");
    return false;
})

—– edit —-

To go through all functions registered,

var prevClickEvents = $.extend({},$._data( $("a")[0], "events")["click"]);

$("a").unbind("click").on("click", function() {
  var keys = Object.keys(prevClickEvents);
  for (var i=0; i< keys.length; i++) {
    try {
      prevClickEvents[keys[i]]["handler"].call(this);
    } catch(e) {
      console.log(e);
    }
  }
});