JQuery triggering custom event causes error

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

+1 for "I just want to murder people without error."

st3inn
– st3inn

2012-10-19 10:53:17 +00:00
Commented Oct 19, 2012 at 10:53 — st3inn
– st3inn, Commented Oct 19, 2012 at 10:53

Chango · Accepted Answer · 2012-10-19 10:53:21Z

9

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.

answered Oct 19, 2012 at 10:53

Chango

6,8121 gold badge30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Wells Over a year ago

Thats interesting! I guessed the recursive thing from the error but had no idea it was by design! triggerHandler works a treat. Nice one

gitaarik · Accepted Answer · 2013-07-22 14:36:32Z

1

The trigger murder calls the method murder on Person since you trigger it on the object Person. That will again call the murder method and so on (unending loop).

If you use jQuery's .triggerHandler() function it will only trigger the trigger, and not call the method.

function Person() {

}

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

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

barry.murder();

working example:

http://jsfiddle.net/6neHC/

jQuery .triggerHandler() doc:

http://api.jquery.com/triggerHandler/

edited Jul 22, 2013 at 14:36

answered Oct 19, 2012 at 11:16

gitaarik

47k12 gold badges101 silver badges109 bronze badges

Collectives™ on Stack Overflow

JQuery triggering custom event causes error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related