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>