Uncaught TypeError: (...).modal 不是 ES6 中的函数

Question

我需要另一双眼睛和知识，因为我是 ES6 新手。

这是我尝试使用 fullcalendar.io 的 index.js 文件：

import $ from 'jquery';
import 'bootstrap';
import 'fullcalendar';
$(function() {
    $('#calendar').fullCalendar({
     // ... 

     eventClick: function(event, jsEvent, view) {

         $('#calendarEventModal').modal();
     }
    })     
})

问题是当我运行此代码并单击事件时，我收到以下错误：

Uncaught TypeError: (0 , _jquery2.default)(...).modal is not a function

我做错了什么？缺什么 ？

Answer 1

至少有两种情况$('#calendarEventModal')没有modal()方法：

• #calendarEventModal 在调用方法时与 DOM 中的元素不匹配（检查您是否可以使用：

if ($('#calendarEventModal').is('#calendarEventModal')) {
  console.log('i has found zee DOM element'); 
  $('#calendarEventModal').modal();
} else {
  console.log('no joy. `#calendarEventModal` missing in action...'); 
}

...显然，您不需要 console.log() )。
简单来说：您的 DOM 中是否有一个带有 id="calendarEventModal" 的元素，在调用 .modal() 时保存您想在模态中看到的任何内容？
它是否放置在内部 #calendar？如果是这样，也许你应该把它拿出来。我不知道.fullCalendar() 对元素执行什么操作，但它可能会用一些生成的标记替换它的innerHTML，从而破坏你的#calendarEventModal。

• 导入的'bootstrap' 包没有modal() 方法 - 可以创建不包括所有模块的自定义引导包。但是，它是默认包含在内的，因此，如果您没有精简包装，您很可能会遇到第一种情况。