Question

I’ve got this backbone code and I cannot figure out why the events in my view are not working. My application is supposed to be an editable gallery. So I create a view (a Gallery view) within the html element $(#obrazekDetail) and I fetch it with ObrazekViews. I want to trigger events on the ObrazekView and I cannot get it working. Apologies for asking the same type of question again. But I couldn’t find any suitable solution. The backbone JavaScript and HTML code follows:

<table id="obrazekDetail" cellspacing="0" cellpadding="2">
</table>
  <!-- Templates -->
<script type="text/html" id="template-obrazek">
    <tr id="<%= order %>">
        <td><img src="<%= obrazek %>"/>
        </td>
        <td>Nadpis:<input name="nadpis" value="<%= nadpis %>" /></td>
        <td>Popis:<input name="popis" value="<%= nadpis %>" /></td>
        <td><input class="edit" type="submit" name="action" value="Edit" /></td>
        <td><input  class="delete" type="submit" name="action" value="Delete" /></a></td>
    </tr>
</script>

<script type="text/template" id="galerie-template">

</script>

// js code

$(function(){

    window.app = window.app || {};
    window.app.obrazek = new Obrazek();
    window.app.obrazky = new Obrazky();
    window.app.view = new GalerieView();
});


var Obrazek = Backbone.Model.extend({
url : function() {
  return  "/ajax-obrazek/" + this.id + "/";
}
});

var Obrazky = Backbone.Collection.extend({
    model: Obrazek,
    initialFetch: function() {
        var self = this;
        $.each(obrazky_data, function(i, object) {
            var obrazek = new Obrazek();
            obrazek.set({
                id: object.pk,
                nadpis: object.fields.nadpis,
                popis: object.fields.popis,
                order: object.fields.order,
                obrazek: object.fields.obrazek
                 });
            self.model = obrazek;
            self.add(self.model);
        });
    }
});
var ObrazekView = Backbone.View.extend({
    template: _.template($("#template-obrazek").html()),
    events: {
        "click input.edit"   : "edit",
        "click input.delete" : "clear"
    },
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
        console.log(this);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    clear: function() {
        console.log('test');
      this.model.destroy();
    },
    edit: function() {
            console.log('test');

    }

});
var GalerieView = Backbone.View.extend({
    el: $("#obrazekDetail"),

    initialize: function() {
        window.app.obrazky.bind('add', this.addOne, this);
        window.app.obrazky.bind('reset', this.addAll, this);
        window.app.obrazky.bind('all', this.render, this);
        window.app.obrazky.initialFetch();
    },
    render: function() {
        return this;
    },
    addOne: function(obrazek) {
        var view = new ObrazekView({model: obrazek});
        this.$el.append(view.render().el.innerHTML);
    },
    addAll: function() {
          window.app.obrazky.each(this.addOne);
    }
});

Answer 1

when u do this this.$el.append(view.render().el.innerHTML); you are extracting the plain html and stripping all events attached to them .
when u define events using

events: {
"click input.edit" : "edit"
},

you may think events are directly attached to input.edit but its not. Backbone attaches events to the el and delegates it to child elements matching the selector.So that at run-time if you attach another input.edit element, the event would still work on it.

So instead just use this conventional way this.$el.append(view.render().el); it maintains all events and gives no surprising results!