重新呈現頁面後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事件不會觸發？

回答

相關問題