CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-viewsbackbone-events
MJVDM
MJVDM

Reputation: 3963

Backbone.View event only fires once

the jumpToWave event gets only fired once, I dont understand why.

This is my view:

var WaveModalView = Backbone.View.extend({

template:_.template($('#tpl-wave-modal').html()),

events: {
    'hidden': 'remove',
    'click .jumpToWaveBtn':'jumpToWave'
},
    jumpToWave:function(e){
        e.preventDefault();
        console.log("JMP")
        var marker = this.model.collection.markers[this.model.id];
        map.panTo(marker.getPosition());
        bounceMarker(marker,1750);
    },
render:function () {
    var model = this.model;
    var that  = this;
    $(this.el).html(this.template(model.toJSON()));

    if(model.get('waveReviews').length > 0){
        var reviewList = new WaveReviewList({model: model});
        $('#waveReviews' + model.id).html(reviewList.render().el);
    }

    this.$("#waveSync" + model.id).click(function(e){
        e.preventDefault();
        if(window.me){
            requestSyncWave(model.id,function(data){
               window.me.fetch();
            });
        }
    });

    this.$("#waveEdit" + model.id).click(function(e){
        e.preventDefault();
        window.waveUnderEdit = model;
        $(that.el).children(":first").modal('hide');
        openWaveEditModal(model);

    });

    return this;
}

});

This is the relevant button in the template:

<button class="btn btn-info jumpToWaveBtn" data-dismiss="modal" aria-hidden="true">Auf Karte
            anzeigen</button>

I have multiple modals by the time I click the button. The event gets fired for every modal just once, after that "JMP" does not get logged anymore.

Upvotes: 1

Views: 1915

Answers (1)

Bruno Reis
Bruno Reis

Reputation: 37822

I don't see your code calling render on the WaveModalView, but I suspect the problem is that you do call render() from somewhere else, which, in turn, calls $(this.el).html(...), which replaces the content of the view's element, and the newly inserted content has no events bound to its elements.

If this is indeed the problem, you can solve it by adding this.delegateEvents() at the end of your render() function.

For instance, check this question and the answers: Why are events not firing after the second render in Backbone.js?

Upvotes: 3

Related Questions