模态框间数据传递异常排查及替代实现方案咨询

问题现象 #

• 点击「View」查看记录1，再点击「Edit」编辑记录1——显示记录1数据，正常；
• 点击「View」查看记录2，再点击「Edit」编辑记录2——仍显示记录1数据，异常；
  期望此时显示记录2的数据。

问题原因 #

jQuery的data()方法会缓存DOM元素的data-*属性值，第一次设置后，后续用attr()修改DOM属性时，data()读取的仍是缓存值，而非最新的DOM属性内容，导致Edit模态框无法获取新记录的数据。

解决方案 #

方式1：修复缓存问题（最小改动）

直接使用data()方法更新缓存，替代attr()修改DOM属性，确保Edit模态框能读取到最新数据。

修改后的JS代码：

$(document).ready(function () {
  $("#viewModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Viewing Record #" + record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    // 用data()方法直接更新缓存，而非修改DOM属性
    $(this).find(".btn-primary").data("record-detail", record_body_raw);
    console.log("showing view modal for record " + record_obj.record_id);
  });

   $("#editModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Editing Record #" + record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    console.log("showing edit modal for record " + record_obj.record_id);
  });
});

方式2：全局变量暂存数据

通过全局变量存储当前查看的记录，Edit模态框直接读取该变量，避免DOM属性传递的缓存问题。

修改后的JS代码：

// 全局变量暂存当前查看的记录
let currentRecord = null;

$(document).ready(function () {
  $("#viewModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    currentRecord = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Viewing Record #" + currentRecord.record_id);
    $(this).find(".modal-body").html(currentRecord.record_id);
    console.log("showing view modal for record " + currentRecord.record_id);
  });

   $("#editModal").on("show.bs.modal", function (e) {
    if (!currentRecord) return;
    
    $(this)
      .find(".modal-title")
      .text("Editing Record #" + currentRecord.record_id);
    $(this).find(".modal-body").html(currentRecord.record_id);
    console.log("showing edit modal for record " + currentRecord.record_id);
  });
});

方式3：手动控制模态框流程

完全接管Edit按钮的点击事件，手动关闭View模态框并传递数据给Edit模态框，避免依赖Bootstrap默认的data-toggle行为。

修改后的JS代码：

$(document).ready(function () {
  let currentRecordData = null;

  $("#viewModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    currentRecordData = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Viewing Record #" + currentRecordData.record_id);
    $(this).find(".modal-body").html(currentRecordData.record_id);
    console.log("showing view modal for record " + currentRecordData.record_id);
  });

  // 手动绑定Edit按钮点击事件
  $("#viewModal .btn-primary").on("click", function() {
    $("#viewModal").modal("hide");
    // 打开Edit模态框前注入数据
    $("#editModal").one("show.bs.modal", function() {
      $(this)
        .find(".modal-title")
        .text("Editing Record #" + currentRecordData.record_id);
      $(this).find(".modal-body").html(currentRecordData.record_id);
      console.log("showing edit modal for record " + currentRecordData.record_id);
    });
    $("#editModal").modal("show");
  });
});

同时需要修改View模态框的Edit按钮，移除默认属性：

<button type="button" class="btn btn-primary">Edit</button>

方案对比 #

• 方式1：改动最小，适合快速修复现有代码；
• 方式2：逻辑清晰，避免DOM操作的潜在问题，但需注意全局变量命名冲突；
• 方式3：灵活性最高，完全控制模态框流程，适合复杂交互场景。

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