未捕获的类型错误: (..).模态不是 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()方法 - 可以创建自定义 Bootstrap 包，不包括所有模块。但是，默认情况下包含它，因此，如果您没有修剪软件包，那么您很可能会面临第一种情况。