backbone.js - "Load" event in "events" property of Backbone View -

normally event can listen in jquery can listen in backbone. in other words, if have:

var myview = backbone.view.extend(); var view = new myview(); view.$el.html('<button>'); var onclick = function() {     alert('woot!'); }; 

and want trigger onclick when button clicked, could do:

$('button').on('click', onclick); 

but because i'm using backbone i'd instead do:

var myview = backbone.view.extend({     events: {click: onclick} }); 

however, doesn't work load event of iframes, if have:

view.$el.html('<iframe src="www.stackoverflow.com"></iframe>'); var onload = function() {     alert('woot!'); }; 

i can do:

$('iframe').on('load', onload); 

but can't do:

events: {load: onload} 

my question two-part: 1) why doesn't work, , 2) there way work around it, still use backbone's events instead of raw jquery?

the events in events attached using delegateevents , uses delegation form of jquery's on. on delegation only works events bubble:

in browsers, load, scroll, , error events (e.g., on <img> element) not bubble. [...] such events not supported use delegation, can used when event handler directly attached element generating event.

so load event in events object won't because load doesn't bubble dom doesn't work event delegation.

you're left doing manually (probably using this.$('iframe').on isolate iframes inside view's el) or using separate view <iframe>. latter work because if don't include selector in events:

events: {     load: 'handler' } 

then event bound directly view's el. if have view this:

var v = backbone.view.extend({     tagname: 'iframe',     attributes: {         src: 'http://example.com'     },     events: {         load: 'loaded'     },     loaded: function() {         // should called.     } }); 

then el <iframe src="http://example.com"></iframe> , load event bound directly <iframe>. may or may not work depending on need event handler do.