重新呈现页面后JQuery事件未触发？

Question

I am working on a Backbone application which is based on a dynamic template . I have a header view, a side panel view and footer view that are dynamically initialized when calling any other view. I am using i18n to have the possibility to switch languages. The Problem is, when I choose a different language and when I call the render function the JQuery events don't fire any more. The template is rendered successfully but the buttons doesn't work.

My Backbone View :

define([ "jquery", "backbone", "text!../../pages/header.html" ], function($,
        Backbone, headerTpl) {

    var header = Backbone.View.extend({
        initialize : function(options) {
            this.render();
        },
        template : _.template(headerTpl),
        events : {
            "click #enBtn" : "swichToEnglish",
            "click #frBtn" : "swichToFrench"
        },
        render : function() {
            this.$el.html(this.template());
            this.delegateEvents();
            return this;
        },
        swichToFrench : function() {//Switching to French
            if (i18n.currentLocal == 'en') {
                i18n.currentLocal = 'fr';
                this.$el.find("#frBtn").css("pointer-events", "auto");
                this.render();//Re-rendering the template
            }
        },
        swichToEnglish : function() {//Switching to English
            if (i18n.currentLocal == 'fr') {
                i18n.currentLocal = 'en';
                this.$el.find("#enBtn").css("pointer-events", "auto");
                this.$el.find("#frBtn").css("pointer-events", "none");
                this.render();//Re-rendering the template
        }
        }
    });

    return header;
});  

The events declared in the events object works but I have external events, JQuery events that are declared in an external file .

Example of a Jquery event:

$('#menu_toggle').on('click',function () {
        if ($('body').hasClass('nav-md')) {
            $('body').removeClass('nav-md');
            $('body').addClass('nav-sm');
            $('.left_col').removeClass('scroll-view');
            $('.left_col').removeAttr('style');
            $('.sidebar-footer').hide();

            if ($('#sidebar-menu li').hasClass('active')) {
                $('#sidebar-menu li.active').addClass('active-sm');
                $('#sidebar-menu li.active').removeClass('active');
            }
        } else {
            $('body').removeClass('nav-sm');
            $('body').addClass('nav-md');
            $('.sidebar-footer').show();

            if ($('#sidebar-menu li').hasClass('active-sm')) {
                $('#sidebar-menu li.active-sm').addClass('active');
                $('#sidebar-menu li.active-sm').removeClass('active-sm');
            }
        }
    });

Any Ideas how to make the JQuery events fire after re-rendering my template? Knowing that All my Jquery events are defined in an external file called custom.js that I call when I initialize my App (Require Js) Thank You.

Answer 1

If the DOM changes, your will loose your event binds too..

Try with this instead:

$(document).on('click', '#menu_toggle', function () {
  //...
});