Question

I want to create a multistep modal using this

问题是我的模态不是步骤，而是在同一页面中。

如果我直接输入html，但是当我创建这个html时，它是有效的。我认为它与javascript生成有关。我在这里缺少什么？

$("body").on('click', '#btnSubmit', function(e) {

  var testCaseNames = ['test1', 'test2'];
  var inputs = ['test3', 'test4'];

  //Modal
  var modal = '<form class="modal multi-step" id="creationModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-step-body"></div><div class="modal-footer"></div></div></form>';
  
   $('#modalDiv').empty().append(modal);
  
  $.each(testCaseNames, function(key, value) {
    console.log(key + ": " + value);
    console.log(inputs);
    //Headers
    $('.modal-header').append('<h4 class="modal-title step-' + key + '" data-step="' + key + '">' + value + '</h4>');
    //Body
    $('.modal-step-body').append('<div class="modal-body step step-' + key + '" data-step="' + key + '"></div>');
    $.each(inputs, function(index, input) {
      console.log(input);
      $(".modal-body.step.step-" + key).append(input);
    });
    //Footer Buttons
    $('.modal-footer').append('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>');
    $('.modal-footer').append('<button type="button" class="btn btn-primary step step-' + key + '" data-step="' + key + '" onclick="sendEvent(\'#creationModal\', ' + key + ')">Continue</button>');


  });
});

sendEvent = function() {
  $('#creationModal').trigger('next.m.2');
};

<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="submit" class="btn btn-rounded btn-success-outline top10" data-toggle="modal" data-target="#creationModal" id="btnSubmit">Create</button>


<div id='modalDiv'></div>

使用javascript创建多步模式

0 个答案: