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

时间:2015-12-12 01:30:55

标签: javascript jquery events backbone.js jquery-events

我正在开发一个基于动态模板的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)谢谢。

1 个答案:

答案 0 :(得分:0)

如果DOM发生变化,您的活动也将失去约束力。

请尝试使用此功能:

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