HTML jQuery：按钮data-id值无法传递到模态框表单的问题求助

你的代码里有几个关键错误导致data-id的值无法传递到模态框输入框，和技术更新无关，都是基础语法与选择器问题：

• 事件选择器错误：脚本中绑定的"open-exampleModal"不是按钮的任何标识（按钮id是btnShowModal），导致事件根本不会触发。
• Bootstrap属性语法错误：按钮上的data toggle应该写成data-toggle（属性名不能有空格），这是Bootstrap触发模态框的标准属性。
• 输入框选择器匹配失败：脚本用$(".modal-body #bookId")定位输入框，但模态框里的输入框只有name="bookId"，缺少id="bookId"属性，导致选择器找不到目标元素。
• 事件时机不合适：直接绑定按钮的click事件可能和Bootstrap模态框的内置触发逻辑冲突，推荐使用模态框专属的show.bs.modal事件，它会在模态框显示前触发，更稳定。

修正后的完整代码 #

触发按钮

<div class="grid-cell">
  <span>
    <button type="button" id="btnShowModal" class="btn btn-link btn-square-md" data-toggle="modal" data-target="#exampleModal" data-id="B1"></button>
  </span>
</div>

模态框（仅修改输入框部分）

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body" id="modalbody">
        <p>some content</p>
        <!-- 新增id="bookId"属性 -->
        <input type="text" name="bookId" id="bookId" value=""/>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

脚本

<script type="text/javascript">  
  // 监听模态框即将显示的事件
  $('#exampleModal').on('show.bs.modal', function (event) {
    // 获取触发模态框的按钮元素
    const triggerBtn = $(event.relatedTarget);
    // 提取按钮的data-id值
    const bookId = triggerBtn.data('id');
    // 给模态框内的输入框赋值
    $(this).find('#bookId').val(bookId);
  });
</script>

说明 #

使用show.bs.modal事件的优势在于：无论通过按钮还是其他方式触发模态框，都能通过event.relatedTarget准确获取触发源，同时事件触发时机确保模态框的DOM元素已经加载完成，避免选择器失效的问题。

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