jQuery 獲取 Knockout 綁定的動態輸入框值：避開 ID 重複陷阱

問題代碼

<tbody data-bind="foreach: records">
  <tr>
    <input data-bind="value: Date, visible: editMode" id='date'/>
  </tr>
</tbody>

// JS
$("#date").val() // 只能取第一個

根本原因

ID 重複：foreach 渲染多行時，每行都生成 id="date"，違反 HTML 唯一性規範，jQuery 只返回首個匹配元素。

解決方案

方案一：Knockout 原生綁定（推薦，無需 jQuery）

<input data-bind="value: Date, visible: editMode, 
                   event: { change: $parent.onDateChange }" />

// ViewModel
self.onDateChange = function(data, event) {
    var newValue = data.Date(); // 直接拿到該行觀察屬性的新值
    console.log("行日期變更:", newValue);
};

方案二：用 class + 上下文查找（必須用 jQuery）

<input class="date-input" data-bind="value: Date, visible: editMode" />

// 獲取「當前可見/編輯中」那行的值
var val = $("input.date-input:visible").val(); 
// 或根據某個按鈕上下文
$(".edit-btn").click(function() {
    var val = $(this).closest("tr").find(".date-input").val();
});

方案三：動態生成唯一 ID（不推薦，繁瑣）

<input data-bind="attr: { id: 'date_' + $index() }, value: Date" />
// 取值
$("#date_" + index).val();

最佳實踐原則

• MVVM 框架（Knockout/Vue/React）下，盡量不用 jQuery 操作 DOM，直接操作 ViewModel 數據。
• 若必須混用，**用 class 不用 id**，配合 :visible、closest()、find() 精準定位。
• Knockout 的 $index、$parent、$root 上下文變量能解決 99% 定位需求。

總結

foreach 產生重複 ID 導致 $("#date") 失效。**改用 Knockout 事件綁定直接取值**，或換 class + 上下文查找。別在 MVVM 裡和 jQuery 爭奪 DOM 控制權。