2012-10-19 6 views
9

Ho un oggetto persona e io essenzialmente voglio che sia in grado di emettere i propri eventi. Tuttavia, se l'evento di attivazione ha lo stesso nome del prototipo di Chrome, viene stampato un errore piuttosto grande. Nel codice di esempio sotto person.murder si attiva l'evento murder che scrive un errore nella console. (il codice ha più senso).JQuery innescando eventi personalizzato causa l'errore

function Person() { 

} 

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

e invoco il grilletto come questo

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

barry.murder(); 

Così ucciso Barry causa un errore, se l'evento è stato qualcosa di simile personDied che non ci sono errori. Sto attivando correttamente l'evento? Voglio solo uccidere le persone senza errori.

L'errore viene talvolta riportati come collassato <error> e talvolta come

Uncaught RangeError: Maximum call stack size exceeded

+4

+1 per – st3inn

risposta

9

Il problema è che jQuery chiama il metodo ricorsivo. Da 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. 

così si dovrebbe usare triggerHandler invece di trigger.

+0

Questo è interessante! Ho indovinato la cosa ricorsiva dall'errore, ma non avevo idea che fosse di progettazione! triggerHandler funziona a meraviglia. Ben fatto – JonWells

1

Il trigger murder chiama il metodo murder su Person poiché lo si attiva sull'oggetto Person. Ciò chiamerà nuovamente il metodo murder e così via (loop infinito).

Se si utilizza la funzione .triggerHandler() di jQuery, attiva solo il trigger e non chiama il metodo.

function Person() { 

} 

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

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

barry.murder(); 

esempio funzionante:

http://jsfiddle.net/6neHC/

jQuery .triggerHandler() doc: "Voglio solo uccidere le persone senza errori"

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