Events not firing in subview

Question

I have a simple scenario, with a view responsible for managing one of my app areas, called TransactionView. One of its subviews it's called TransactionEditorView.

The problem with it is that its events are not firing!

The transaction editor shows correctly (showAddEntryForm is called), but cannot be hidden ('click .hide-add-entry' is never fired).

I will post relevant parts of my code:

TransactionView.js

Backbone.View.extend({

    className: 'transactionView',

    initialize: function() {

        //  ...

        this.editorView = new TransactionEditorView({
            collection: this.collection, 
            parent: this
        });

        this.render();
    },

    render: function() {

        this.$el.html( template() ); // underscore template "transactions.html"

        this.$el.find('.new-transaction').after( this.editorView.render().el );
        return this;
    },

    events: {
        'click .new-transaction button': 'showAddEntryForm'
    },

    showAddEntryForm: function(event) {
        event.preventDefault();

        $(event.currentTarget).addClass('selected');
        this.editorView.show(); 
    },
    //...
}

transactions.html

<div class="controls-container">

    <div class="new-transaction">
        <button type="button" class="btn btn-lg btn-success add-positive-entry">
            <span class="visible-xs-* hidden-sm hidden-md hidden-lg">+</span>
        </button> 
        <button type="button" class="btn btn-lg btn-danger add-negative-entry">
            <span class="visible-xs-* hidden-sm hidden-md hidden-lg">-</span>
        </button>
        <div class="clearfix"></div>
    </div>

    <div class="balance">balance</div>

    <div class="filters">filters</div>

</div>

<div class="entry-list"></div>

TransactionEditor.js

Backbone.View.extend({

    className: 'add-entry-form', 
    template: template, 

    initialize: function(options) {
        this.collection = options.collection;
        this.parent = options.parent;
    },

    render: function() {
        console.log(this.el);
        this.$el.html( this.template() );
        return this;
    },

    events: {
        'click .add-entry' : 'addEntry',
        'click .hide-add-entry' : 'hide'
    },

    hide: function(event) {
        console.log("Hiding editor");
        event.preventDefault();
        this.$el.slideUp();
        this.parent.$el.find('.new-transaction button').removeClass('selected');
    },

    show: function() {
        this.$el.slideDown();
    },

    addEntry: function() {

    }
    // ...
}

transactionEditor.html

<form role="form">
    form fields
</form>

I suspect that something related to the el of the subview is not working good, but can't get where it is... please help me.

UPDATE

Very strange! By simply moving the editor view creation code ( this.editorView = new TransactionEditorView(...); ) from the parent's initialize method to the parent's render method... It works! Now I'm really confused...

Answer 1

Can you try doing a

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}

That should log out every event that's getting fired. I find it super helpful when troubleshooting.