Question

I have a person object and I essentially want it to be able to emit its own events.
However if the trigger event has the same name as the prototype than Chrome prints out a rather large error. In the code sample below person.murder triggers the murder event which writes an error to console. (the code makes more sense).

function Person() {

}

Person.prototype.murder = function() {
   $(this).trigger("murder");
}

And I invoke the trigger like this

var barry = new Person();
$(barry).on("murder", function(){
   alert("I am so angry");
})

barry.murder();

So murdering barry causes an error, however if the event was something like personDied than there is no error. Am I triggering the event correctly? I just want to murder people without error.

The error is sometimes returned as a collapsed <error> and sometimes as

Uncaught RangeError: Maximum call stack size exceeded

Answer 1

The problem is that jQuery is calling the method recursively. From http://api.jquery.com/trigger/:

Note: For both plain objects and DOM objects, if a triggered event name matches the name
of a property on the object, jQuery will attempt to invoke the property as a method if no
event handler calls event.preventDefault(). If this behavior is not desired, use
.triggerHandler() instead.

So you should use triggerHandler instead of trigger.