在jQuery on change事件中瞭解'this'的作用域

我爲我正在編寫的項目編寫了jQuery的快速自定義擴展。我很難在我想實現的自定義onChange方法中理解'this'的範圍。如果在我調用web服務的代碼中間留下了一些內容，但是如果您檢出最後兩種方法，則會看到我的問題在哪裏。我想用選定的值更改調用updateDetails方法。但是，在onchange事件中調用該方法時，顯然會丟失「this」的範圍，因爲this.materialListResponse在此上下文中未定義。任何幫助我幫助我理解這一點將不勝感激。在jQuery on change事件中瞭解'this'的作用域

$.fn.appendMaterials = function (options) { 

     this.options = options; 

     //Set Default Options 

     this.defaults = { 

      typeID: '66E1320D-51F9-4900-BE84-6D5B571F9B80' 

     }; 

     this.options = $.extend({}, this.defaults, options); 

     // 
     Code here to call web service and generate response XML 
     // 

     this.materialListResponse = $.xml2json(

     $.parseXML($(this.materialListWebservice()).find("GetMaterialTreeResponse").text())).Materials.Material; 

     this.appendOptionString = function() { 
      var i = 0; 
      this.optionString = '<option>' 
      for (i = 0; i < this.materialListResponse.length; i++) { 
       this.optionString += '<option>' + this.materialListResponse[i].MaterialCode + '</option>'; 
      }; 

      this.append(this.optionString); 

      return this; 
     }; 

     this.appendOptionString(); 

     this.updateDetails = function() { 
      for (i = 0; i < this.materialListResponse.length; i++) { 

       if (this.materialListResponse[i].MaterialCode === this.val()) { 

        $('#table1 #MaterialDescription').val(this.materialListResponse[i].Description); 

       } 
      } 
     } 

     this.change(this.updateDetails) 

    };

來源

2012-08-31 Andy Thornton

傳遞對象this作爲數據事件：

this.change({that: this}, this.updateDetails)

，然後你可以在事件回調的範圍內訪問that

this.updateDetails = function(event) { 
    var that = event.data.that; 
    ... 
}

資源

http://api.jquery.com/event.data/

來源

2012-08-31 19:27:15 nickaknudson

太棒了！工作完美！非常感謝！ –

您應該在事件處理程序中聲明'that'變量，否則它將是全局的。 – Guffa

@Guffa：嗯。沒有發現這一點。刪除我的答案。 –

事件處理程序將在稍後調用，當您退出擴展時。它在元素的範圍內調用，因此this將是已更改的元素。

複製參考列表一個局部變量，並使用在事件處理程序：

var list = this.materialListResponse; 
this.updateDetails = function() { 
    for (i = 0; i < list.length; i++) { 
     if (list[i].MaterialCode === this.val()) { 
      $('#table1 #MaterialDescription').val(list[i].Description); 
     } 
    } 
}

通過在函數中使用的局部變量，該變量將被關閉的功能的一部分，所以它將在其聲明的擴展方法的範圍內存活。

來源

2012-08-31 19:23:45 Guffa

當在JavaScript中調用一個方法作爲回調函數時，它的行爲就像一個函數一樣。在這種情況下，「this」是指這個函數的所有者，通常是Web瀏覽器中的Window對象。

來源

2012-08-31 19:38:42

在jQuery on change事件中瞭解'this'的作用域

回答

相關問題