Question

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

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

在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 () {
  //...
});

重新渲染页面后JQuery事件不会被触发？

1 个答案: