使用JavaScript创建多步骤模态框的问题排查

嘿，我刚仔细看了你的问题，直接写HTML时多步骤模态框正常工作，但用JavaScript动态生成就所有步骤堆在同一页，这个坑我之前也踩过！

问题根源 #

问题出在多步骤模态框插件的初始化逻辑上——这类插件通常是在页面加载完成后，自动对已存在的.modal.multi-step元素做初始化绑定。但你是点击按钮后才动态生成的模态框，这时候插件早就跑完初始化流程了，根本没检测到新生成的这个模态框，自然不会帮你处理步骤切换的逻辑。

另外你的代码里还有两个小细节问题：

1. 拼接HTML时用了</>转义字符，在JS字符串里直接用</>就可以，转义后反而会导致HTML解析异常；
2. 循环里重复添加Close按钮，最后会生成多个Close按钮，影响交互。

解决方案 #

核心思路是：动态生成完所有模态框内容后，手动触发插件的初始化。同时修正上述细节问题，具体代码如下：

修正后的JavaScript代码

$("body").on('click', '#btnSubmit', function(e) { 
  e.preventDefault(); // 阻止按钮默认提交行为，避免页面跳转
  var testCaseNames = ['test1', 'test2']; 
  // 把输入项改成实际的HTML元素，而不是纯字符串
  var inputs = [
    '<div class="form-group"><label>Input 1</label><input type="text" class="form-control" placeholder="test3"></div>',
    '<div class="form-group"><label>Input 2</label><input type="text" class="form-control" placeholder="test4"></div>'
  ]; 

  // 用模板字符串拼接HTML，更清晰且无需转义
  var modal = `
    <form class="modal multi-step" id="creationModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header"></div>
          <div class="modal-step-body"></div>
          <div class="modal-footer"></div>
        </div>
      </div>
    </form>
  `; 
  
  $('#modalDiv').empty().append(modal); 
  
  // Close按钮只添加一次，移到循环外
  $('.modal-footer').append('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
  
  $.each(testCaseNames, function(key, value) { 
    // 添加步骤标题
    $('.modal-header').append(`<h4 class="modal-title step-${key}" data-step="${key}">${value}</h4>`); 
    // 创建步骤主体容器并添加到页面
    var $stepBody = $(`<div class="modal-body step step-${key}" data-step="${key}"></div>`);
    $('.modal-step-body').append($stepBody); 
    
    // 给当前步骤添加输入项
    $.each(inputs, function(index, input) { 
      $stepBody.append(input); 
    }); 
    
    // 添加当前步骤的Continue按钮
    $('.modal-footer').append(`<button type="button" class="btn btn-primary step step-${key}" data-step="${key}" onclick="sendEvent('#creationModal', ${key})">Continue</button>`); 
  }); 
  
  // 关键！动态生成后手动初始化多步骤模态框
  $('#creationModal').multiStepModal({
    startStep: 0 // 默认显示第一步
  });
  
  // 手动打开模态框（动态生成的元素不会触发原data-target的自动打开）
  $('#creationModal').modal('show');
}); 

sendEvent = function(modalSelector) { 
  $(modalSelector).trigger('next.m.2'); 
}; 

对应的HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://www.ngzhian.com/multi-step-modal/multi-step-modal.js"></script>

<button type="button" class="btn btn-rounded btn-success-outline top10" id="btnSubmit">Create</button>
<div id='modalDiv'></div>

关键改动说明 #

1. 新增e.preventDefault()：阻止按钮默认的提交行为，避免页面刷新导致动态生成的元素丢失；
2. 改用模板字符串拼接HTML：代码可读性更高，无需转义特殊字符；
3. Close按钮移到循环外：避免重复生成多个Close按钮；
4. 手动初始化插件：动态生成完所有内容后调用multiStepModal()，让插件识别新生成的步骤并绑定切换事件；
5. 手动打开模态框：动态生成的模态框不会触发原data-target的自动打开逻辑，所以需要手动调用modal('show')。

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