jQuery点击获取按钮文本赋值表单字段

本文深入讲解了如何利用 jQuery 实现按钮点击时动态提取其显示文本（如服务端渲染的 @item.Id）并自动赋值给表单字段，彻底摆脱硬编码依赖，显著提升代码的可维护性、复用性与扩展性；文中不仅提供了开箱即用的安全实现方案（含 trim() 处理、事件委托建议和 data-* 属性最佳实践），还针对多按钮场景、模态框延迟渲染及特殊字符处理等常见痛点给出专业解决方案，是 ASP.NET MVC 或 Razor Pages 前后端协同开发中不可或缺的实用技巧。

本文介绍如何通过 jQuery 在按钮点击时自动提取其显示文本（如 @item.Id），并将其设置为指定表单元素（如 <input id="Id">）的值，避免硬编码，提升代码复用性与可维护性。

本文介绍如何通过 jQuery 在按钮点击时自动提取其显示文本（如 @item.Id），并将其设置为指定表单元素（如 <input id="Id">）的值，避免硬编码，提升代码复用性与可维护性。

在实际开发中（尤其在 ASP.NET MVC 或 Razor Pages 场景下），我们常需将服务端渲染的动态数据（如 @item.Id）传递至前端 JavaScript 逻辑中。一种常见但不推荐的做法是直接在 JS 中写死参数（如 $('#Id').val('parameter')），这会导致逻辑耦合、难以维护，且无法适配多条记录。

更健壮、可扩展的方案是：让按钮自身“携带”数据，并在点击时由 jQuery 动态读取。核心思路是利用 $(this).text() 获取当前被点击按钮的可见文本内容，并将其赋值给目标表单控件。

以下是完整、可直接运行的实现示例：

<!-- 引入 jQuery（建议置于 </body> 前或使用模块化加载） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 动态渲染的按钮（Razor 示例） -->
<button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button>

<!-- 目标输入框（用于接收 ID 值） -->
&lt;input type=&quot;text&quot; id=&quot;Id&quot; placeholder=&quot;ID will be populated here&quot; /&gt;

$(document).ready(function () {
  $('#buttonEdit').on('click', function () {
    const clickedId = $(this).text().trim(); // 安全获取并去除首尾空格
    $('#Id').val(clickedId);
  });
});

✅ 关键要点说明：

• $(this) 指向当前被点击的 DOM 元素（即该 ），确保上下文准确；
• .text() 获取按钮的纯文本内容（不包含 HTML 标签），比 .html() 更安全；
• .trim() 防止因模板换行或空格导致的意外空白字符；
• 使用 .on('click', ...) 替代已废弃的 .click()，符合现代 jQuery 最佳实践；
• 若页面存在多个编辑按钮（如表格中每行一个），应避免重复 id="buttonEdit"（ID 必须唯一），此时推荐改用 class="btn-edit" 并结合 data-id="@item.Id" 属性传递值，再通过 $(this).data('id') 读取——这是更规范、可扩展的方案。

⚠️ 注意事项：

• 确保目标元素（如 #Id）在 DOM 加载完成后存在；若该输入框位于模态框（Modal）内且初始未渲染，需在模态框 shown.bs.modal 事件中赋值，或使用事件委托；
• 在服务端渲染场景中，@item.Id 应已正确输出为数字或字符串，无需额外 JSON 编码；若含特殊字符（如引号、换行），建议改用 data-* 属性方式传递结构化数据。

通过这一模式，前端逻辑彻底解耦于服务端变量名，既保障了类型安全（文本即 ID），又为后续支持批量操作、异步加载等场景打下坚实基础。

到这里，我们也就讲完了《jQuery点击获取按钮文本赋值表单字段》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！