Attaching jquery events to bound items

Probably you are loading data via ajax, so initially the {{each}} helper is empty, because the data isn’t fetched yet. After the view is inserted, doesn’t have any item, this.$('li').length == 0, because the ajax is pending. So no events are added. The ajax finish, the {{each}} update because of data binding, but the didInsertElement doesn’t trigger again.

You can use the afterRender queue and schedule a function to be triggered when the rendering is finished:

# hbs
{{#each}}
  <li>{{name}}</li>
{{/each}}
<li>this one works</li>
# View
didInsertElement: function ()  {
  Ember.run.scheduleOnce('afterRender', this, function() {
    this.$('li').click(function (e) { alert('hi') })
  });  
}
1 Like