Backbone View Events are not Firing

Question

I have a modal dialog class that I am extending in order to show a form with some buttons. Here is the ModalView view:

App.ModalView = Backbone.View.extend({
    events: {
        "click .dismiss": "dismiss"
    },
    element: "<section class='modal'><div class='overlay'></div><div class='content'></div></section>",

    initialize: function () {
        this.el = $(this.element);

        this.setupElement();
        this.bindContext();
        this.extendEvents();
        this.render();
        this.miscellaneous();
    },

    bindContext: function () {
        _.bindAll(this, "dismiss", "render", "setBoxStyle");
    },

    setupElement: function () {
        this.template = $("#modal-template");
    },

    miscellaneous: function () {},
    extendEvents: function () {},

    render: function () {
        $(this.el).find(".content").html(this.template.html());
        $("body").append(this.el);

        this.setBoxStyle();

        if (this.options.content) {
            $(this.el).find(".content").html(this.options.content);
        }
    },

    getMargin: function (width, height) {
        var top, left;

        width = parseFloat(width);
        height = parseFloat(height);

        top = Math.max(0, Math.round((window.innerHeight - height) / 2));
        left = Math.max(0, Math.round((window.innerWidth - width) / 2));

        return top + "px " + left + "px";
    },

    setBoxStyle: function () {
        var css = this.options.css || {};

        var el = $(this.el).find(".content");

        el.css(css);

        var width = el.outerWidth();
        var height = el.outerHeight();
        css.margin = this.getMargin(width, height);

        el.css(css);
    },

    dismiss: function () {
        this.remove();
    }
});

Here is the extended view:

App.AddRecordView = App.ModalView.extend({
    setupElement: function () {
        this.template = $("#add-record-template");
    }
});

Here is the template:

<script type="text/template" id="add-record-template">
    <h1>Add Record</h1>

    <button class="green save">Save Record</button>
    <button class="cancel dismiss">Cancel</button>

</script>

Here is how I initialize the view:

this.addRecordView = new App.views.addRecord({
    model: this.model,
    css: {
        width: "400px"
    }
});

For some reason the dismiss event never fires when I click the button. What's going on here?

Answer 1

You have not defined an el or a tagName for your view. Backbone assigns the delegate events to a div by default if none of the above are declared. In your initialize function you then set the el explicitly, overriding the el with the eventhandlers attached. Try to set your section as tagName and remove it from your element property. Then append your elements to this.el. Sorry for not providing a code example but I am writing on my phone.

Answer 2

without the proper code i can only guess, but this kind of error usually comes because your view's code is declared before the dom is ready.

could you show us where you kickstart your application?

is it within a jquery document ready function?

$(function(){
    this.addRecordView = new App.views.addRecord({
        model: this.model,
        css: {
            width: "400px"
        }
    });
});