jQuery關不工作，因爲我預期

Question

解決！看到問題的結尾，我用的結果

我想寫一個函數，可以處理我的應用程序按路徑分頁。

我有一個函數route（）被調用，參數是要移動到的路徑（頁面）。

route是一個對象，它定義了一個處理其邏輯的模型。 此模型包含3個功能 indexAction - 這呈現我的看法，並將其附加到我的頁面。 bindEvents - 這是我已經把我所有的點擊事件 關機 的 - 這是指令轉移到一個新的頁面

路由功能首先運行關閉當前頁面上運行時，在這裏我有$ （選擇）.off（）和$（選擇）一個.remove（）

它然後運行enidexAction和bindEvents功能。

我現在的問題是，當我回到這個頁面，我所有的點擊功能都運行兩次，然後三次等等......它好像斷（）從來沒有真正從錨解除綁定。

這裏是我的模型

var NewPageModel = (function() { 
var instance; 
var modal = 'null'; 
function createInstance() { 
    var object = { 
     indexAction: indexAction, 
     shutDown: shutDown, 
     bindEvents: bindEvents 
    }; 
    return object; 
} 

function indexAction (data, callback){ 
    var partials = {}; 
    ViewManager.render('pageName',{context:data}, partials,function(html){ 
     ViewManager.appendUnique('#xxx',html,'uniqueID'); 
     callback(); 
    }); 
} 

/** 
* Remove modal 
*/ 
function shutDown(){ 
    this.modal.off(); 
    this.modal.remove(); 
} 

function bindEvents() { 
    if(this.modal!='null'){ 
     return; 
    } 
    this.modal = $(PagerManager.pages.newGroup.id); 

    this.modal.on('click','div.close', function() { 
     shutDown(); 
    }); 

    this.modal.on('click', 'button.cancel', function() { 
     shutDown(); 
    }); 

    this.modal.on('click', 'button.submit', function() { 
     //code that submits form information 
    }); 
} 

return { 
    getInstance: function() { 
     if (!this.instance) { 
      this.instance = createInstance(); 
     } 
     return this.instance; 
    } 
}; 
})(); 

編輯之一的例子！ 所以我仍然在學習有關範圍的重要性，以及如何可以應用到的功能 這裏是工作的代碼 VAR NewPageModel =（函數（）{ VAR實例; VAR模態; 功能的createInstance（）{ VAR對象= { 的indexAction：的indexAction， shutdown：關閉， bindEvents：bindEvents }; 返回對象; }

function indexAction (data, callback){ 
    var partials = {}; 
    ViewManager.render('pageName',{context:data}, partials,function(html){ 
     ViewManager.appendUnique('#xxx',html,'uniqueID'); 
     callback(); 
    }); 
} 

/** 
* Remove modal 
*/ 
function shutDown(){ 
    this.modal.off(); 
    this.modal.remove(); 
    this.modal = null; 
} 

function bindEvents() { 
    //This is confused logic, if I use off() in shutdown, I don't need to do this as I need to bind all the events again. hence in shutdown modal=null; 
    if(!this.modal){ 
     return; 
    } 
    this.modal = $('#modal'); 

    this.modal.on('click','div.close', function() { 
     shutDown().apply(this); 
    }).bind(this);; 

    this.modal.on('click', 'button.cancel', function() { 
     shutDown().apply(this); 
    }).bind(this);; 

    this.modal.on('click', 'button.submit', function() { 
     //here I only use the apply(this) if I use another internal function 
     //code that submits form information 
    }).bind(this);; 
} 

return { 
    getInstance: function() { 
     if (!this.instance) { 
      this.instance = createInstance(); 
     } 
     return this.instance; 
    } 
}; 
})(); 

Answer 1

在保持你的語法和精神只是修復bug，

if(this.modal!='null'){應該if(modal!='null'){

因爲this.modal將undefined在這個條件下，將剛剛返回。

本着修復代碼的精神，您需要保留對this的引用，否則它將在瀏覽器中默認爲window。

var modal; 
function createInstance() { 
    var object = { 
     modal : modal, 
     shutDown: shutDown, 
     bindEvents: bindEvents 
    }; 
    return object; 
} 

function bindEvents() { 
    if(this.modal){ 
     return; 
    } 

    // ..... // 
    this.modal.on('click','div.close', function() { 
     shutDown.apply(this); 
    }.bind(this)); 

    // ..... // 
} 

工作演示：

http://jsfiddle.net/uyovgdj3/

Answer 2

你正在失去你的this在事件處理程序的功能（this將是元件點擊）所以shutDown是沒有得到正確的this：

this.modal.on('click','div.close', function() { 
    shutDown(); 
}); 

應該是：

var self = this; 
this.modal.on('click', 'button.cancel', function() { 
    self.shutDown(); 
}); 

例如

function bindEvents() { 
    var self = this; 
    if(this.modal!='null'){   /// <<<< !!!!!! WTF 
     return; 
    } 
    this.modal = $(PagerManager.pages.newGroup.id); 

    this.modal.on('click','div.close', function() { 
     self.shutDown(); 
    }); 

    this.modal.on('click', 'button.cancel', function() { 
     self.shutDown(); 
    }); 

    this.modal.on('click', 'button.submit', function() { 
     //code that submits form information 
    }); 
} 

注：我忽略字符串比較null現在，因爲我不知道你在做什麼有:)

正如評論所指出的@Gurami Dagundaridze你也可以保持正確this使用bind（我認爲的語法是這樣的）：

this.modal.on('click', 'button.cancel', shutDown.bind(this));