CODEWITHSUNDEEP
javascriptjquerybackbone.js
Melbourne2991
Melbourne2991

Reputation: 11797

Click events stop working after firing once backbone js

I have a number of click events that link to different places on my site as well as pages off my site.

It seems the first time I click on one, it works initially, but after that ALL my click events stop firing completely.

Not sure what's going on, and what code I should post?

I am using a router to render a number of views on the site.

I should also mention that my console does not show any errors.

Here is where the scripts are called. The ids for the click events have been edited, but i have checked and are all correct (click works on first go so they would be anyway).

EDIT Important note: It seems that click events are fine UNTIL navigation occurs

<!--templates-->
<!--Home -->
<script type="template/jquery" id="home_template">
    <%= partial "templates/home_template" %>
</script>
<!--Portfolio -->
<script type="template/jquery" id="portfolio_template">
    <%= partial "templates/portfolio_template" %>
</script>
<!--About-->
<script type="template/jquery" id="about_template">
    <%= partial "templates/about_template" %>
</script>



<!--Javascripts-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/backfire/0.3.0/backbone-firebase.min.js"></script>
<script src="javascripts/modernizr.js"></script>
<!--Application-->
<script src="javascripts/models.js"></script>
<script src="javascripts/views.js"></script>
<script src="javascripts/routes.js"></script>
<!--script src="javascripts/application.js"></script-->

<script>
    $(document).ready(function () {

        //home links
        $("#recent_work").click(function() {
           router.navigate("portfolio", true)
        });            

        //portfolio links
        $("#xx").click(function() {
            window.open('http://chexxxxxs.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://updaxxxxxal.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://whxxxxnry.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://frexxxxxe.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://puxxxxxel.com/');
        });

        $("#xx").click(function() {
            window.open('http://xxxxxxing.com.au/');
        });

    });
</script>

Routes file:

 var Router = Backbone.Router.extend({
routes: {
  '': 'home',
  'home' : 'home',
  'portfolio' : 'portfolio',
  'about' : 'about'
}
});

var homeView = new HomeView({ el: $("#container") });
var portfolioView = new PortfolioView({ el: $("#container") });
var aboutView = new AboutView({ el: $("#container") });

var router = new Router();

router.on('route:home', function () {
    homeView.render();
});

router.on('route:portfolio', function () {
    portfolioView.render();
});

router.on('route:about', function () {
    aboutView.render();
});

Backbone.history.start();

views:

var HomeView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#home_template").html(), {} );
        this.$el.html(template);
    }
});

var PortfolioView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#portfolio_template").html(), {} );
        this.$el.html(template);
    }
});

var AboutView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#about_template").html(), {} );
        this.$el.html(template);
    }
});

Upvotes: 1

Views: 691

Answers (1)

Melbourne2991
Melbourne2991

Reputation: 11797

Thank you to @undefined for help coming up with this answer.

When my views are rendered the container is emptied out with .html() this leads to an unbinding of the events. In backbone the events within a view have to be defined in the view itself in the "events" hash, when you do this backbone automatically re delegates the events.

var PortfolioView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#portfolio_template").html(), {} );
        this.$el.html(template);
    },
    events: {
        "click .portfolio_item" : "linktoLive"
    },
    linktoLive: function (e) {
        var link = $(e.currentTarget).attr("data-link");
        window.open(link);
    }
});

Under the events hash, add events in this format event binding : function to execute on event then add the function after.

Upvotes: 2

Related Questions