Backbone.js - events only fire once

Question

My events do not work as I hoped, and I think I know why. When you click on the perpage step, everything is displayed correctly. But I realized - maybe the events are not tied to the new markup? Maybe that's why it works only once? (If I click on a range with number 10 in it, 10 elements will appear, as it should be. But then everything that I click does not change anything)

What is the best way to organize this? Should the template not include a pagination section? How to connect basic events to the markup after repeated visualization?

var ListView = Backbone.View.extend({ initialize: function() { var self = this; this.collection.bind("refresh", function(){self.render();}); this.render(); }, events: { 'click ul#perpage span': 'setperpage' }, setperpage: function(event) { this.collection.perpageurl = '/perpage/' + $(event.target).text(); this.collection.fetch(); this.collection.refresh(); }, render: function() { template = _.template('\ <table>\ <% _(collection).each(function(model){%>\ <tr><td><%=model.id%></td><td><%=model.name%></td><td><%=model.email%></td></tr>\ <%}); %>\ </table>\ <ul id="perpage">\ <li><span>5</span></li>\ <li><span>10</span></li>\ </ul>\ '); var context = {collection: this.collection.toJSON()}; $(this.el).html(template(context)); $('#app').html(this.el); return this; } }); 

Answer 1

to try:

 render: function() { // … this.delegateEvents(); return this; } 

To debug events in JavaScript, use Visual Event . He will tell you which elements are associated with them.