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

Question

我正在开发一个基于动态模板的骨干应用程序。我有一个标题视图，一个边面板视图和页脚视图，这些视图在调用任何其他视图时都是动态初始化的。我正在使用i18n来转换语言的可能性。问题是，当我选择一种不同的语言时，当我调用render函数时，JQuery事件就不会再触发了。模板已成功呈现，但按钮无法工作。

我的主干视图：

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

events对象中声明的事件可以工作，但我有外部事件，即在外部文件中声明的JQuery事件。

Jquery事件示例：

$('#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');
            }
        }
    });

有什么想法，如何使JQuery事件后，重新呈现我的模板？我知道所有Jquery事件都是在一个名为custom.js的外部文件中定义的，我在初始化我的应用程序(需要Js)时调用该文件，谢谢。

Answer 1

如果DOM发生变化，则您的事件也会发生绑定。

试着用这个代替：

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