jQuery無法訪問此內部更改事件

Question

我有一個問題試圖獲取外部組合框更改事件級聯組合框的暫掛。您可以添加和刪除表中的行，以便可以有任意數量的行。每行內部有2個組合框。 1個用於客戶，1個用於聯繫。我有一個更改事件觸發客戶組合框，併爲該客戶拉取有效聯繫人。以下是表格的HTML

<tr class="ClassAttendee">  
<td> 
    <select class="Customers valid" id="Attendees_0__Customers" 
    name="Attendees[0].Customers">  
     <option value="1517">Woodstock</option> 
     <option value="1518">Woolwich</option> 
     <option value="1519">Yarmouth</option> 
     <option value="1520">York</option> 
    </select> 
</td> 
<td> 
    <select class="Contact"> 
     <option value="">Choose Attendee...</option> 
    </select> 
</td> 
<td> 
    <input data-val="true" data-val-required="The Attended field is required." 
    id="Attendees_0__Attended" name="Attendees[0].Attended" type="checkbox" 
    value="true"><input name="Attendees[0].Attended" type="hidden" value="false"> 
    <span class="field-validation-valid" data-valmsg-for="nestedObject.Attended" data 
    -valmsg-replace="true"></span> 
</td> 
<td> 
    <input class="FeePaid" data-val="true" data-val-required="The Fee Paid field is 
    required." id="Attendees_0__FeePaid" name="Attendees[0].FeePaid" type="checkbox" 
    value="true"><input name="Attendees[0].FeePaid" type="hidden" value="false"> 
    <span class="field-validation-valid" data-valmsg-for="nestedObject.FeePaid" data 
    -valmsg-replace="true"></span> 
</td> 
<td> 
    <input class="CheckNumber" id="Attendees_0__CheckNumber" 
    name="Attendees[0].CheckNumber" type="text" value=""> 

    <span class="field-validation-valid" data-valmsg-for="nestedObject.CheckNumber" 
    data-valmsg-replace="true"></span> 
</td> 
<td> 
    <input class="mark-for-delete" data-val="true" data-val-required="The Delete field 
    is required." id="Attendees_0__Delete" name="Attendees[0].Delete" type="hidden" 
    value="False"> 

    <a href="#" 
    onclick="javascript:removeNestedForm(this,'tr.ClassAttendee','input.mark-for 
    -delete');return false;">Remove</a> 
</td> 
</tr> 

每行看起來像這樣，其中前2個單元格包含下拉列表。第一個是客戶，第二個是聯繫人。如果我只是使用$（「Contact」）的選擇器，我可以用正確的選項更新組合框，所以我知道這是行得通的，但我需要指定行，因爲當我使用該選擇器時，所有行都會更新。

？下面是JQuery的，我試圖用

$('.Customers').change(function (e) { 
     var selectedCustomer = $(this).val(); 
     if (selectedCustomer != null && selectedCustomer != '') { 
      $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) { 
       var contactSelect = $(this).parent().next().children(".Contact"); 
       contactSelect.empty(); 
       $.each(contacts, function (index, contact) { 
        contactSelect.append($('<option/>', { 
         value: contact.ID, 
         text: contact.Name 
        })); 
       }); 
      }); 
     } 
    }); 

我有問題的speicif線

var contactSelect = $(this).parent().next().children(".Contact"); 

如果我使用一個選擇先選擇客戶下拉框而不是使用這個，然後使用該行的其餘部分我可以選擇聯繫人下拉。我不明白爲什麼這不起作用，如果我不能使用這個對象，我也不知道如何選擇我正在處理的change事件行上的特定下拉列表。

任何想法將不勝感激。

Answer 1

嘗試使用封閉：

$('.Customers').change(function (e) { 
    var selectedCustomer = $(this).val(); 
    if (selectedCustomer != null && selectedCustomer != '') { 
     (function(el) { 
      $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) { 
       var contactSelect = $(el).parent().next().children(".Contact"); 
       contactSelect.empty(); 
       $.each(contacts, function (index, contact) { 
        contactSelect.append($('<option/>', { 
         value: contact.ID, 
         text: contact.Name 
        })); 
       }); 
      }); 
     })(this); 
    } 
}); 

Answer 2

這是一個古典問題：this引用函數調用的上下文，對於大多數回調來說是window。

A液：

if (selectedCustomer != null && selectedCustomer != '') { 
     var that = this; 
     $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) { 
      var contactSelect = $(that).parent().next().children(".Contact");