Keypress event simulation with jquery when testing backbone app not working

I'm writing tests for a Backbone view and am trying to simulate pressing the enter button. I have found several answers on how to simulate keypress and click events, however I do not think they are working. I get the following error message when running my tests: AssertionError: expected createOnEnter to have been called exactly once, but it was called 0 times.

Shouldn't the function I an trying to test be triggered automatically when we use jquery's trigger method? Is there some special caveat when it come to Backbone apps when simulating click and keypress events?

My test code is as follows:

describe("AppView", function() {

    before(function () {

        // create test fixture
        this.$fixture = $('<div id="app-view-fixture">' +
        '<input id="new-comment" type="text" placeholder="what do you think?">' +
        '<div class="comment-buttons">' +
        '<div class="post-button"></div>' +
        '<div class="cancel-button"></div>' +
        '</div>' +
        '<section id="main" class="comment-list">' +
        '<ul class="comments-container" id="comment-list"></ul>' +
        '</section></div>');

    });

    beforeEach(function () {

        // bind the fixture for each run
        this.$fixture.appendTo($("#fixtures"));

        // set-up fake server
        this.server = sinon.fakeServer.create();
        this.server.autoRespond = true;

        // instantiate our models
        this.model1 = new Comment({
            "comment": "I like cookies",
            "created": "12-12-2012",
            "modified": "13-01-2013",
            "user": {
                "username": "Mr. Knight"
            }
        });

        this.model2 = new Comment({
            "comment": "I pirate everything!",
            "created": "14-09-2012",
            "modified": "21-01-2013",
            "user": {
                "username": "Mr. Casanova"
            }
        });

        // place models in array for use in collection instantiation
        this.models = [this.model1, this.model2];

        // instantiate our collection with models from above
        this.collection = new CommentList(this.models,
            {url: "items/1234567890/comments"}
        );


        // stub fetch because it is called in the initialize method of AppView and causes an error if not stubbed
        this.fetchStub = sinon.stub(CommentList.prototype, "fetch", function() {return this.models});

        // instantiate our new view
        this.view = new AppView ({
            "collection": this.collection,
            "el": this.$fixture
        });

        this.createSpy = sinon.spy(this.view, "createOnEnter");

    });

    afterEach(function () {
        // destroy our view
        this.view.remove();

        // restore our stub
        this.fetchStub.restore();

        this.createSpy.restore();

        // undo our server
        this.server.restore();
    });

    after(function () {
        // empty our fixtures div
        $("#fixtures").empty();
    });



it("should create new comment on 'Enter'", function () {

        // Simulate an "enter" (keycode 13) event on `enterNote` after
        // we have entered a title in the new note input field.
        //
        // See: http://ift.tt/193YMfF
        $("#new-comment")
            .val("Hot models up-stairs")
            .trigger($.Event("keypress", { which: 13 }));

        expect(this.createSpy).to.have.been.calledOnce;
    });

The code I am trying to test is a part of AppView:

// If you hit return in the main input field, create new **Comment** model,
    // persisting it to *localStorage*.
    createOnEnter: function(event) {
        if (event.keyCode != 13) return;
        if (!this._input.val()) return;

        this.addCommentToCollection();
        this.resetInputField();
        this.concealButtons();
    },

And it has createOnEnter set in the event hash:

events: {
        "keypress #new-comment": "createOnEnter"
}