Backbone view events not firing when input altered on the page

Question

Below is a simple model/corresponding view that I've set up. It's linked to a table with a couple drop downs and one input text box. I want the view methods to fire when the values in the text box and drop downs are changed, however I haven't had any luck.

Using the console.log statments and breakpoints, the only method that seems to execute is the initialize method in the model. None of the view methods fire when the drop down/input box values change.

Fiddle: http://jsfiddle.net/qneL65zs/14/

Backbone

$(document).ready(function() {
    var QuoteHistory = Backbone.Model.extend({
        //urlRoot: '/Values/SaveQuote',

        defaults: {
            hub: new Backbone.SignalR("QuoteHub"),
            avgHist: "",
            State: "",
            AgeGroup: "",
            Purchase: "",
            PastQuote: "",
            Date: "",
            AverageQuote: ""
        },

        initialize: function () {
            console.log("Model initialize");
        }
    });

    var QuoteView = Backbone.View.extend({
        el: $('#QuoteInput'),

        events: {
            "input td input#QuotePurchase": "udpatePurchase",
            "change #QuoteAge": "udpateQuoteAge",
            "change #QuoteState": "udpateState",
            "click #QuoteSave": "udpateModel"
        },

        initialize: function() {
            _.bindAll(this, 'updatePurchase', 'updateQuoteAge', 'updateState');

            this.model.bind('change', this.updatePurchase);
            this.model.bind('change', this.updateQuoteAge);
            this.model.bind('change', this.updateState);
        },

        render: function () {
            console.log("render");
            this.model.pullAverageQuote();
        },

        updatePurchase: function() {
            console.log("update purchase");
            var val = this.$el.find('#QuotePurchase').val();
            this.model.set({ Purchase: val });
        },

        updateQuoteAge: function () {
            console.log("update age");
            var val = this.$el.find('#QuoteAge option:selected').val();
            this.model.set({ AgeGroup: val });
        },

        updateState: function () {
            console.log("update state");
            var val = this.$el.find('#QuoteState option:selected').val();
            this.model.set({ State: val });
        },

        updateModel: function () {
            console.log("update model");
            this.model.save(this, {
                success: function() {
                    console.log("success");
                    this.model.pullAverageQuote();
                },

                error: function(error) {
                    console.log("error during update");
                    console.log(error);
                }
            });
        }
    });

    $(function() {
        var quoteHistory = new QuoteHistory;
        var quoteView = new QuoteView({ model: quoteHistory });
    });
});

HTML

<table class="table table-striped" id="QuoteInput">
                            <thead>
                                <tr>
                                    <th colspan="2"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>State</td>
                                    <td>
                                        <select id="QuoteState">
                                            <option value="AZ">AZ</option>
                                            <option value="CA">CA</option>
                                            <option value="OR">OR</option>
                                            <option value="WA">WA</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Age Group</td>
                                    <td>
                                        <select id="QuoteAge">
                                            <option value="35_45">35-45</option>
                                            <option value="45_55">45-55</option>
                                            <option value="55_65">55-65</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Purchase Payment</td>
                                    <td>
                                        <input type="text" id="QuotePurchase" style="width: 6em; text-align: center;">
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><button type="button" id="QuoteSave">Save</button></td>
                                </tr>
                            </tbody>
                        </table>

EDIT

Screen shot below is from console.log(this) statement in the View's initialize method

SECOND EDIT

Below is the output of a console.log(this) statement placed at the end of the initialize method of the view.

This output is the same as the console.log(quoteView) statement mentioned is the comments below.

Answer 1

UPDATE:

After JSfiddle was added, we determined that only the "change" on the form element events were not firing (click was working) - further search reveals that this is an issue with backbone:

Backbone.js html select / radio change event is not firing, but click event is