基於另一個自動完成的選定值的Jquery自動完成URL

Question

我有一個允許用戶提交時間表的表單。這包含一週中每天的多個表格行。每一行都是通過調用AddRow來創建的，AddRow添加了HTML，並且還在JobNumber字段中添加了一個自動完成框，以便用戶可以查找並選擇所需的作業。

我現在需要將第二個自動完成添加到說明字段，以允許用戶選擇已爲該作業創建的任務。因此，我需要在源URL中傳遞參數，以指定在上一個框中選擇的作業。

但是，當我嘗試查找Job的值時，它始終返回「undefined」。

我錯過了什麼？

這裏是什麼，我有一個簡化版：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://code.jquery.com/ui/1.8.7/jquery-ui.min.js"></script> 

<script> 

function AddRow(day) { 

    var count = 1; 

    var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme"]; 

    var row = "<tr>" + 
     "<td>&nbsp;</td>" + 
     "<td>" + 
      "<input type='text' style='width:100px' id='" + day + "[" + count + "].JobNumber' name='" + day + "[" + count + "].JobNumber'>" + 
      "<input type='hidden' style='width:100px' id='" + day + "[" + count + "].JobID' name='" + day + "[" + count + "].JobID'>" + 
     "</td>" + 
     "<td><input type='text' size='50' id='" + day + "[" + count + "].Description' name='" + day + "[" + count + "].Description' class='Description' data-day='" + day + "' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Start' name='" + day + "[" + count + "].Start' class='numbersOnly' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Finish' name='" + day + "[" + count + "].Finish' class='numbersOnly' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Travel' name='" + day + "[" + count + "].Travel' class='numbersOnly' /></td>" + 
     "<td>" + 
      "<input type='hidden' id='" + day + "[" + count + "].Hrs' name='" + day + "[" + count + "].Hrs' class='Hrs' />" + 
      "<input type='text' size='6' id='" + day + "[" + count + "].Hours' name='" + day + "[" + count + "].Hours' class='Hours numbersOnly' />" + 
      "<select name='" + day + "[" + count + "].Mins'>" + 
       "<option value='0'>0</option>" + 
       "<option value='25'>0.25</option>" + 
       "<option value='5'>0.5</option>" + 
       "<option value='75'>0.75</option>" + 
      "</select>" + 
     "</td>" + 
     "</tr>"; 
    $("#Table_" + day).append(row); 

    $("input[id$='JobNumber']").autocomplete({ 
     source: availableTags, 
     select: function(event, ui) { 
      $("input[id$='JobID']", $(this).parent().parent()).val(ui.item.JobID); 
     }, 
     change: function(ev, ui) { 
      if (!ui.item) 
       $(this).val(""); 
     } 
    }); 

    $("input[id$='Description']").autocomplete({ 
     source: function (request, response) { 
      // get the selected job number 
      var jobID = $("input[id$='JobNumber']", $(this).parent().parent()).val(); 

      alert(jobID); 

      if (request.term.length > 2) { 
       $.ajax({ 
        url: "/Tasks/AJAXGetByJobNumber/" + jobID, 
        data: { Task: request.term }, 
        dataType: "json", 
        success: function (data) { 

         temp = $.map(data, function (item) { 
          return { 
           label: item.label, 
           value: item.value, 
           JobID: item.JobID 
          } 
         }); 
         temp.unshift({ label: "Non-Chargeable Work", value: "Non-Chargeable Work", JobID: null }); 
         response(temp); 
        } 
       }); 
      } 
     }, 
    }); 

} 


</script> 

<table id="Table_Monday"> 

</table> 

<a href="#" onclick="AddRow('Monday')"/>Add</a> 

我在那裏檢查增值的警報，但其返回「未定義」每次。我已經嘗試了JobID和JobNumber字段，但都沒有工作。

Answer 1

簡短的回答：$(this)比賽沒什麼，與$(this.element)

---

這是發生，因爲source是一個小部件的選擇，而不是一個事件替換它。因此，它的（僞）處理程序沒有綁定在節點實例上，即，節點實例

。裏面的source功能，this引用窗口小部件，而不是元素，這將導致選擇不匹配任何

要訪問的元素，只需使用this.element：

var jobID = $("input[id$='JobNumber']", $(this.element).parent().parent()).val(); 

這裏是你的代碼提琴：https://jsfiddle.net/uxpeytxn/

注意：這僅僅是source相關，在select，change和其他事件處理程序，this引用的元素，正如人們所預料