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

我正在使用基于动态模板的Backbone应用程序。我有一个标题视图，一个侧面板视图和页脚视图，它们在调用任何其他视图时动态初始化。我正在使用i18n来切换语言。问题是，当我选择不同的语言，并且当我调用渲染函数时，JQuery事件不再触发。模板呈现成功，但按钮不起作用。重新呈现页面后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; 
});

在事件中声明的事件对象的工作，但我有外部事件是在一个外部文件中声明，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）谢谢时，我会调用它。

来源

2015-12-12 EL Kamel

我从来没有在骨干应用程序的工作，但也许在HTML事件取决于他们在哪里叫，可能会产生问题。我的意思是在HTML文件中，你将在''关闭之前链接到脚本，以便DOM已经创建。也许在这里你必须这样做，或者尝试使用'document.ready（）'。每次重新加载模板时都会更改DOM。所以你必须在生成DOM之后进行调用。 –

如果DOM的变化，你会失去你的事件结合太..

尝试用这个代替：

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

来源

2015-12-12 01:41:23 dsdenes

如何将事件绑定到“新”DOM？无需再次调用脚本文件？ –

尝试用我已经显示的剪辑。 :) – dsdenes

我试过了，它的工作原理谢谢:) –

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

回答

相关问题