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

Question

我正在开发一个基于动态模板的 Backbone 应用程序。我有一个页眉视图、一个侧面板视图和页脚视图，它们在调用任何其他视图时动态初始化。我正在使用 i18n 来切换语言。问题是，当我选择不同的语言并调用渲染函数时，JQuery 事件不再触发。模板已成功呈现，但按钮不起作用。

我的 Backbone 视图：

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

在事件对象中声明的事件有效，但我有外部事件，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 () {
  //...
});

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

JQuery Events not Firing after re-rendering Page?

javascript

jquery

events

backbone.js

jquery-events