Bootstrap 4-.modal不是函数

时间:2018-08-13 21:05:39

标签: javascript twitter-bootstrap bootstrap-modal

我正在将纯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">&times;</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:已修复!请参阅下面的答案。

1 个答案:

答案 0 :(得分:0)

使用$('#success-delete')而不是从documentSelector声明的对象修复。不确定为什么,但是可以正常工作!