实现点击按钮添加区块后自动触发Edit菜单打开全屏弹窗

问题说明 #

点击Click me here按钮会添加一个列表区块，每个区块右上角的Action菜单包含Edit、Delete、Run选项。需要实现：每次新增区块后，自动打开该区块对应的Edit全屏弹窗。

原代码存在的问题 #

1. 所有新增的模态框都使用同一个id="exampleModalToggle"，重复ID会导致Bootstrap模态框逻辑混乱，无法正确关联对应区块的弹窗
2. 新增区块后没有触发Edit按钮的点击事件

修改后的代码 #

<!doctype html>
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
    crossorigin="anonymous"></script>
</head>

<body>
  <button id="clickme">Click me here</button>
  <script>
    // 计数器，用于生成唯一ID
    let blockCount = 0;

    $("#clickme").click(function (event) {
      blockCount++;
      const modalId = `exampleModalToggle-${blockCount}`;
      
      // 构建带唯一ID的区块和模态框
      const newBlock = $(`
        <ul class="list-group">
          <li class="list-group-item">
              <img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />            

              <div class="btn-group float-end">
                  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                  <ul class="dropdown-menu dropdown-menu-lg-end">
                      <li><a data-bs-toggle="modal" href="#${modalId}" role="button" class="dropdown-item edit-link">Edit</a></li>
                      <li><a class="dropdown-item" href="#">Delete</a></li>
                      <li><a class="dropdown-item" href="#">Run</a></li>
                  </ul>
              </div>
              
              <div class="ms-5">Item ${blockCount}<br/>
              <small class="text-secondary">This is item ${blockCount} description</small>
              </div>
              
              <div class="modal fade" id="${modalId}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel-${blockCount}" tabindex="-1">
                  <div class="modal-dialog modal-fullscreen">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h1 class="modal-title fs-5" id="exampleModalToggleLabel-${blockCount}">Edit file ${blockCount}</h1>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body"> What is Lorem Ipsum? </div>
                          <div class="modal-footer">
                              <button class="btn btn-primary" data-bs-dismiss="modal">Save</button>
                          </div>
                      </div>
                  </div>
              </div>
          </li>
        </ul>
      `);
      
      // 添加到页面
      $("body").append(newBlock);
      
      // 触发新增区块的Edit点击事件
      newBlock.find('.edit-link').click();
    })
  </script>
</body>
</html>

关键修改点 #

• 新增blockCount计数器，为每个区块和模态框生成唯一ID，避免重复ID导致的冲突
• 调整模态框的id和Edit链接的href，确保一一对应
• 新增区块后，通过newBlock.find('.edit-link').click()直接触发Edit按钮的点击事件，自动打开全屏弹窗
• 优化了区块的标题和描述，区分不同的新增区块

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