Question

我正在将纯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：已修复！请参阅下面的答案。

Answer 1

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

Bootstrap 4-.modal不是函数

1 个答案: