我正在将纯Javascript与Bootstrap结合使用,并遇到此错误。我看过许多不同的问题,但似乎没有一个对我有用。我用npm下载了Jquery,Popper和Bootstrap,并在我的身体底部添加了min脚本:
<div id="success-delete" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Success!</h4>
</div>
<div class="modal-body">
<p>Template successfully deleted.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/js/jquery.min.js" defer></script>
<script src="/js/popper.min.js" defer></script>
<script src="/js/bootstrap.min.js" defer></script>
<script src="/js/template-section.js" defer></script>
如您所见,我正在引导之前加载jquery。在我的Javascript中调用函数时,我希望模式出现:
/* template-section.js */
class TemplateSection {
constructor(...) {
...
this.successModal = document.querySelector('#success-delete');
}
_removeTemplate(e) {
const success = this.deleteCallback(e.currentTarget.previousSibling.getAttribute('src'));
if (success) {
this.container.removeChild(e.currentTarget.parentNode);
this.successModal.modal('show');
} else {
// do something
}
}
}
我也曾尝试将模式选项更改为{show:true},但这不起作用。打印出this.successModal可以给我正确的元素,但它似乎没有模态函数。
编辑:我也知道我所包含的bootstrap.min.js文件包含模态的事实-我尝试通过单击按钮激活模态,并且效果很好。正在使javascript识别出问题的模式。
编辑2:已修复!请参阅下面的答案。
答案 0 :(得分:0)
使用$('#success-delete')
而不是从documentSelector声明的对象修复。不确定为什么,但是可以正常工作!