Question

我正在尝试使用this example创建multi-step模式，但我似乎无法使用javascript动态创建它。我让testCaseNames硬编码，因为这些是从ajax帖子中获取的。

基本上是一个2步模式，其中第一个在标题和正文中显示teste1，而另一个在teste2显示{。}}。

有更简单的方法吗？即使在这个小代码中，使用它也是一团糟。为什么我的模态不像示例那样工作？

$('#btnSubmit').click(function(e) {
  e.preventDefault();
  var testCaseNames = ['teste1','teste2'];
  
  //Modal
  var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
  //Progress
  modal += '<div class="m-progress"><div class="m-progress-bar-wrapper"><div class="m-progress-bar"></div><div class="m-progress-stats"><span class="m-progress-current"></span>/<span class="m-progress-total"></span></div><div class="m-progress-complete">Completed</div></div>';

  $.each(testCaseNames, function(key, value) {
 
        //Headers
        $('.modal-header').html('<h4 class="modal-title step-' + key + ' data-step="' + key + '"</h4>');
        //Body
        modal += '<div class="modal-body step-' + key + '" data-step="' + key + '">' + value + '</div>';
        // //Footer Buttons
        modal += '<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>';
        modal += '</div></div></form>';
  
  });
  $('#modalDiv').empty().html(modal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.ngzhian.com/multi-step-modal/multi-step-modal.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>



<button type="submit" class="btn btn-rounded btn-success-outline top10" data-toggle="modal" data-target="#creationModal" id="btnSubmit">Create</button>

<script>
  sendEvent = function(sel, step) {
    $(sel).trigger('next.m.' + step);
  }
</script>

Answer 1

您的JQuery代码的最后一行 - $('#modalDiv').empty().html(modal);，您尝试向ID为modalDiv的div添加新内容，但此元素现在不在您的HTML中，只需添加它，您的代码就会工作

动态创建HTML

1 个答案: