td内input使用jQuery.val()获取值为空的问题排查与解决

我有一个包含输入框和按钮的<td>元素，尝试用jQuery获取输入框的值时遇到了问题：当代码放在table外的body中时能正常获取输入值，但按钮和输入框都在td内时，点击按钮始终返回空字符串。

HTML代码 #

<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
   <input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
   <button id="buttonTest">Insert Ticket</button>
</td>

最初的JS代码 #

$(document).on("click", "#buttonTest", function () {
  var getInput = $("input[name='Description']").val();
  console.log("Input = " + getInput);
});

我原本期望能获取输入框的内容，一开始以为是输入框本身的问题，但单独把输入框和按钮放在body标签中时能正常工作。测试后发现只要在td内，输入值就始终返回空，推测是全局查找选择器导致获取到了错误的元素。

解决方法 #

修改JS代码，从点击的按钮出发，限定查找范围为当前td内的输入框：

$(document).on("click", "#buttonTest", function () {
  var getInput = $(this).closest("td").find("input[name='Description']").val();
  console.log("Input = " + getInput);
});

原因说明：原代码使用全局选择器input[name='Description']，如果页面中存在多个同名的输入框，或者DOM加载时存在其他干扰元素，就可能取到空值或错误的元素。改用$(this).closest("td")先定位到按钮所在的父级td，再在这个局部范围内查找输入框，确保获取的是当前td内的目标输入框内容，避免了全局查找的歧义。

内容的提问来源于stack exchange，提问作者genericdude76