Click events stop working after firing once backbone js

Question

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);
    }
});

Have you checked the console? This happens when there is an error somewhere in your code. And shouldn't we see the code? — Ram, Dec 08 '13 at 07:58
yes no errors, the code is quite long and accorss multiple scripts, not sure which part of the code is most relevant? — Melbourne2991, Dec 08 '13 at 08:01
If there is no errors, there should be something logically incorrect. Posting the error-prone part should be sufficient? Your question as it doesn't show the problem. — Ram, Dec 08 '13 at 08:05
Thanks, surely the IDs are unique? Note that if you are creating the elements dynamically you should delegate the events. If they belong to a Backbone View, you can use it's `events` option, which delegates the events for you. — Ram, Dec 08 '13 at 08:14
yes, all unique, and there shouldnt be any problem with them because they work fine individually — Melbourne2991, Dec 08 '13 at 08:14
ah okay this could be the problem, as its only on navigation the click events stop working, how can I do this? is there any example? — Melbourne2991, Dec 08 '13 at 08:17
Please check this http://backbonejs.org/#View-delegateEvents — Ram, Dec 08 '13 at 08:19
okay so I need to define the events within the view? `events: ` — Melbourne2991, Dec 08 '13 at 08:22
If the `a` elements are descendants of your View, yes. Otherwise delegate the events from document object or another element, http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on — Ram, Dec 08 '13 at 08:25
do you mean the elements that will function as links? not actual a elements? — Melbourne2991, Dec 08 '13 at 08:27
Actually type of the element doesn't matter. I thought the `#xx` elements are anchors. Sorry if it was confusing. — Ram, Dec 08 '13 at 08:29
Hey @undefined, I got it fixed thanks to your advice so thank you, did you want to add an answer so I can mark it as correct? — Melbourne2991, Dec 08 '13 at 19:17
You are very welcome, glad to be of help, I think you can answer the question better than me, please answer your own question, accept it, and I'll upvote it. — Ram, Dec 08 '13 at 20:12

score 2 · Answer 1 · answered Dec 08 '13 at 20:44

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.

Click events stop working after firing once backbone js

1 Answers1