[英]Append Html Using Javascript or Jquery
I'm trying to make a multi-page modal like this one (last button): https://www.ngzhian.com/multi-step-modal/ 我正在尝试制作一个这样的多页面模式(最后一个按钮): https : //www.ngzhian.com/multi-step-modal/
but I'm getting only this html when I run the script. 但是运行脚本时我只会得到这个html。 What am I missing here??
我在这里想念什么? I dont get any error.
我没有任何错误。
var testCaseNames = ['test', 'test2']; //Modal var testCaseNames = ['test', 'test2']; //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> <div id="modalDiv"> <form class="modal multi-step in" id="creationModal" style="display: block; padding-right: 17px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title step-0" data-step="0"> </h4></div> </div> </div> </form> </div>
Errors occur when changing the innerHTML of elements many times at the same function. 在同一函数中多次更改元素的innerHTML时会发生错误。 Try calling
.html()
once, like you did at this line $('#modalDiv').empty().html(modal);
尝试一次调用
.html()
,就像您在此行进行的操作$('#modalDiv').empty().html(modal);
Instead of this line $('.modal-header').html('...');
代替这一行
$('.modal-header').html('...');
, keep adding html text in the modal
variable. ,请继续在
modal
变量中添加html文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.