要让一个按钮在点击后去修改另一个按钮的显示文字，核心动作可以拆成三部分：找到源按钮、监听它的点击事件、把新的文字写入目标按钮。jQuery 把这三步压缩得非常短，最常见的就是 $("#sourceBtn").click(...) 配合 $("#targetBtn").text("...")。但在实际项目里，目标按钮可能是 <input type="button">，也可能按钮是后来动态插入的，这些情况会影响方法选择和绑定方式。下面分别展开。

基础用法：click 事件配合 text 方法

先准备两个普通的 <button> 元素。源按钮负责触发动作，目标按钮是被修改文字的那个。假设页面结构如下：

<button id="sourceBtn">点击修改</button>
<button id="targetBtn">原始文字</button>

引入 jQuery 后，在文档就绪函数里绑定 click 事件。当 #sourceBtn 被点击时，调用目标按钮的 .text() 方法，把按钮中间的可见文字替换掉。

$(function () {
  $("#sourceBtn").click(function () {
    $("#targetBtn").text("新的按钮文字");
  });
});

这里 .text("新的按钮文字") 会覆盖目标按钮内部原有的所有内容。如果按钮原本包含子元素，也会一并被替换成纯文本。text 方法接受字符串参数，也接受函数参数。传入函数时，函数的返回值会作为新的文本内容，适合需要基于旧文字做拼接或状态切换的场景。例如点击一次把按钮文字改成已保存，再点击一次改回保存，就可以在函数里读取当前文本进行判断。

还要注意绑定时机。代码放在 $(function () { ... }) 中是为了保证 DOM 元素已经加载完成。如果脚本放在页面底部也可以直接绑定，但放在 head 里就必须等待文档就绪，否则选择器找不到元素，点击事件不会生效。

text、html 和 val：不同按钮类型用不同方法

jQuery 里修改元素内容的方法不止一个，常见的有 .text()、.html() 和 .val()。它们分别对应纯文本、HTML 结构和表单值。对于 <button> 元素，按钮文字写在开始标签和结束标签之间，所以用 .text() 或 .html() 都有效。区别在于 text 会把参数当作纯文本处理，即使传入的内容看起来像 HTML 标签，也会原样显示；html 则会解析其中的标签。

// 纯文本写法：字符串中的标签会原样显示
$("#targetBtn").text("保存 <b>草稿</b>");
// HTML 写法：strong 标签会生效
$("#targetBtn").html("保存 <strong>草稿</strong>");

从安全角度看，如果按钮文字来源于用户输入或外部数据，应当优先使用 .text()。html 方法虽然能支持加粗、变色等富文本效果，但也会把传入的脚本标签解析进页面，如果数据不可信，容易带来脚本注入风险。只有在自己完全控制内容的前提下才使用 html。

如果目标按钮不是 <button> 而是 <input type="button"> 或 <input type="submit">，按钮上显示的文字来自 value 属性，而不是标签内部文本。这时调用 .text() 不会改变界面上的按钮文字，必须改用 .val() 方法修改 value 属性。

<input type="button" id="sourceInput" value="点击修改">
<input type="button" id="targetInput" value="原始值">

$("#sourceInput").click(function () {
  $("#targetInput").val("修改后的值");
});

如果页面上同时存在 <button> 和 <input> 两种按钮，可以写一个通用处理逻辑：先判断目标元素是否为 input，再决定用 val 还是 text。这样能避免方法用错导致按钮文字不更新的问题。

$(".trigger").click(function () {
  var $target = $("#targetBtn");
  if ($target.is("input")) {
    $target.val("新文字");
  } else {
    $target.text("新文字");
  }
});

动态生成的按钮：使用事件委托绑定

前面的示例都假设按钮在页面加载时已经存在。如果源按钮是后来通过 Ajax 请求、模板渲染或用户操作才插入到页面中，直接使用 .click() 绑定不会生效，因为绑定动作发生时目标元素还不存在。jQuery 的 .on() 方法支持事件委托，可以把监听器挂载到一直存在的父元素甚至 document 上，由事件冒泡机制触发处理函数。

$(document).on("click", "#sourceBtn", function () {
  $("#targetBtn").text("来自动态按钮的修改");
});

这种写法的原理是：点击事件会从源按钮一路向上冒泡到 document，jQuery 检查触发事件的元素是否匹配第二个参数中的选择器，匹配则执行回调。因此即使 #sourceBtn 是后来才创建的，只要点击时它已经存在于页面中，事件就能被捕获。

当页面中有多组按钮需要互相修改时，可以使用 data 属性把目标按钮的 id 写在源按钮上，再配合事件委托，实现一套代码控制多组交互。这样就不必为每一对按钮单独写 click 绑定，也更方便维护。

<button class="trigger" data-target="btnA">修改 A</button>
<button class="trigger" data-target="btnB">修改 B</button>
<button id="btnA">A</button>
<button id="btnB">B</button>

$(document).on("click", ".trigger", function () {
  var targetId = $(this).data("target");
  $("#" + targetId).text("被点击修改");
});

这里 $(this).data("target") 用来读取 data-target 属性值，再通过字符串拼接组成选择器。注意如果目标 id 包含特殊字符，拼接前最好做转义处理，但在常规英文数字 id 场景下直接拼接没有问题。

完整示例与常见问题

把上述内容组合起来，一个相对完整的页面可以这样写：页面加载时绑定一个存在的源按钮，同时用事件委托处理动态源按钮，目标按钮可能是 <button> 也可能是 <input>。这样能覆盖大多数简单交互需求。

<button id="sourceBtn">点击修改</button>
<button id="targetBtn">原始文字</button>
<input type="button" id="targetInput" value="原始值">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#sourceBtn").click(function () {
    $("#targetBtn").text("按钮文字已更新");
    $("#targetInput").val("输入按钮已更新");
  });
});
</script>

调试这类功能时，最常见的问题是按钮点击后没有反应。可以先在控制台执行 $("#sourceBtn").length 和 $("#targetBtn").length，确认选择器能匹配到元素。如果长度是 0，多半是 id 拼写错误、脚本加载顺序问题，或者按钮是动态插入但使用了直接绑定。其次检查是否引入了 jQuery 库，以及是否在 jQuery 加载之前执行了相关代码。

另一个容易忽略的地方是重复绑定。如果同一个按钮被多次绑定 click 事件，点击一次可能触发多次修改。虽然文本最终结果一样，但如果逻辑中包含计数、请求发送等操作，就可能产生预期之外的行为。可以通过先调用 .off("click") 再重新绑定，或者把绑定代码放在只会执行一次的位置来避免。

总的来说，jQuery 修改另一个按钮文本并不复杂，关键是分清按钮类型、选对方法，并根据元素是否是动态生成来决定绑定方式。掌握了 click、text、val 以及事件委托这些基础点之后，再遇到类似的 UI 交互，就能快速写出稳定可靠的代码。