Jquery中通过按钮触发其他按钮时input.val()返回undefined问题

问题现象 #

单独点击#primaryBtn、#secondaryBtn、#thirdBtn时，能正常获取对应输入框的值；但点击独立按钮#devSaveBtn触发这些按钮的点击事件时，通过input.val()获取到的值始终是undefined。

核心原因 #

1. DOM结构匹配错误：#devSaveBtn的DOM位置独立于所有包含输入框的<td>标签，使用$(this).closest("td")根本找不到对应的父级<td>，自然无法定位到里面的输入框，所以val()返回undefined。
2. trigger返回值判断无效：$("#primaryBtn").trigger("click")返回的是jQuery对象，在布尔判断中永远为true，导致if条件始终成立，无法正确判断按钮点击事件的实际执行结果。

解决方案 #

1. 修正输入框选择逻辑 #

直接通过输入框的name或id属性定位元素，无需依赖触发按钮的DOM位置：

• 比如用$("input[name='Object Name']")或$("#OBJ_NAME")直接选中目标输入框。

2. 正确获取按钮点击的验证结果 #

使用triggerHandler()替代trigger()，它会返回事件处理函数的返回值，而非jQuery对象，能准确判断验证是否通过。

修改后的完整代码 #

JavaScript部分

// 为各按钮绑定验证逻辑（示例，根据实际需求调整）
$(document).on("click", "#primaryBtn", function() {
  const inputVal = $(this).closest("td").find("input[name='Object Name']").val();
  // 验证输入长度是否符合要求
  return inputVal && inputVal.length >= 8;
});

$(document).on("click", "#secondaryBtn", function() {
  const inputVal = $(this).closest("td").find("input[name='Project Name']").val();
  // 验证输入非空
  return !!inputVal;
});

$(document).on("click", "#thirdBtn", function() {
  const inputVal = $(this).closest("td").find("input[name='Description']").val();
  // 验证输入非空
  return !!inputVal;
});

// 修改devSaveBtn的点击事件
$(document).on("click", "#devSaveBtn", function () {
  // 触发各按钮的事件并获取验证结果
  const primaryValid = $("#primaryBtn").triggerHandler("click");
  const secondaryValid = $("#secondaryBtn").triggerHandler("click");
  const thirdValid = $("#thirdBtn").triggerHandler("click");

  if (primaryValid && secondaryValid && thirdValid) {
    // 直接通过name属性选择输入框
    const getInput = $("input[name='Object Name']").val();
    console.log("Input = " + getInput);

    const getInput2 = $("input[name='Project Name']").val();
    console.log("Input2 = " + getInput2);

    const getInput3 = $("input[name='Description']").val();
    console.log("Input3 = " + getInput3);
  } else {
    console.log("输入验证不通过");
  }
});

HTML部分（修正devSaveBtn的语法错误）

<button type="button" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;">
  <i class="fa fa-save"></i> Save
</button>
<td class="noncomponentswidth" id="recordObjName">
  <p>
    <input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
    <button id="primaryBtn">Primary</button>
  </p>
  <button style="display: none;">Submit</button>
</td>
<td class="noncomponentswidth" id="recordProjectName">
  <input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
  <button id="secondaryBtn">Secondary</button>
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate">
  <input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
  <button id="thirdBtn">Third</button>
</td>

注：原HTML中#devSaveBtn标签内多余的input type="submit"属性已移除，符合HTML语法规范。

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