Backbone.View event only fires once

Asked By: Anonymous

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.


Solution

Answered By: Anonymous

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?


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno