Backbone Layout Manager subview's events doesn't work after reload

Question

I'm using the Backbone Layout Manager Boilerplate. Unfortunately, a quite frustrating bug occurred. I like render a list of items as subviews inserted by insertView function. At the first load everthing works fine. But after a reload the the click events doesn't work anymore :(. I already tried to call delegateEvents() on the TableItem View manually but nothing changed. I hope anyone can give me a clue.

App.Views.Item = Backbone.View.extend({
  template: "templates/item",
  tagName: "li",
  events: {
    "click .applyButton" : "apply",
    "click .viewDetailsButton" : "showDetail"
  },
  serialize: function() {
    return { table : this.model.toJSON() };
  },
  apply: function(ev) {
    ev.preventDefault();
    alert("apply button clicked");
  },
  showDetail: function(ev) {
    ev.preventDefault();
    var id = this.model.get("_id");
    app.router.navigate("#events/"+ id, {trigger : true})
  }
});

/*
 * List View
 */

 App.Views.List = Backbone.View.extend({
   template: "templates/list",

   tagNam: "ul",
   className: "tableList",

   beforeRender: function() {
     var events = this.model.get("userEvents").get("hosting");


     events.each(function(model) {
       this.insertView(new App.Views.Item({ model : model }));
     }, this);
   },

   serialize: function() {
     return {};
   }
});

Answer 1

I think you might want to add a cleanup function on your Item view to undelegate the events when layoutmanager removes the view. I don't know if this will fix your problem, but it seems like good practise.

When you say after a reload, do you mean reloading the page with the browser reload button? if so, how do you get it to work in the first place?

It would help if you could provide a jsfiddle of your setup, or point us to a repo so we can test it on our machines. Make sure you include the router so that we can have a look at how the view and the layout that contains it are initialised.