Question

this is absolutely driving me crazy! Can someone please explain why this code isn’t working and how to fix it? It should be sending the message “click” to the console but it is not working. Console messages work everywhere else, but for some reason javascript is not capturing the click event.

var resultsListView = new ResultsListView({model: comparablesList});

ResultsListView = Backbone.View.extend({
        tagName:'div',
        id:'resultView',
        template:_.template("<div class='resultsListItemView'></div>"),

        initialize:function () {
            $( this.el ).html('<p class="loadingText">Getting comparables...<p>');
            this.model.bind("change", this.render, this);
            this.model.bind("reset", this.loading, this);
        },

        render:function (eventName) {
            $( this.el ).html( this.template() );

            _.each(this.model.models, function (comparable) {
                this.$('.resultsListItemView').append(new ResultsListItemView({model:comparable}).el);
            }, this);

            $('#info').html($(this.el));

            return this;
        }
    });

    ResultsListItemView = Backbone.View.extend({
            initialize: function(){
                this.render();
            },

            template:_.template("<div class='hovr_item'> \
                                    <div class='hovr'> \
                                        <button class='test123'>test</button> \
                                    </div> \
                                </div> "),

            render: function(){
                var resultsListItemView = this;
                $(this.el).html(this.template(this.model.toJSON()));

                $(this.el).find('.test123').click(function() {
                    console.log('click'); // this does not work after clicking
                });
                return this;
            }
        });

As an extra clue, if I put this code into render it does show up in the console… so it appears to be only the click event:

$(this.el).find('.test123').each(function(index) {
        console.log('found');
    });

Answer 1

Have you tried binding this event with the events attribute? ie:

events: "click .test123": "affiliateClick"