[英]I get the error $(...).modal is not a function even though bootstrap is imported after jQuery how can i fix this (using npm versions)?
I did extensive research before posting this issue and feel I have exhausted the online documentation and Stack Overflow.我在发布这个问题之前做了大量的研究,觉得我已经用尽了在线文档和 Stack Overflow。
My issue:我的问题:
I'm using the npm versions of bootstrap with the tempus dominus date time picker script and get the error $(...).modal is not a function even though jQuery is imported before bootstrap and then used to actually import bootstrap in the backend like so:我正在使用带有 tempus dominus 日期时间选择器脚本的 npm 版本的 bootstrap 并得到错误 $(...).modal is not a function 即使 jQuery 在 bootstrap 之前导入,然后用于在后端实际导入 bootstrap像这样:
const ipcRenderer = require('electron').ipcRenderer
const jQuery = require('jQuery');
const $ = require('jQuery');
require('popper.js')
const moment = require('moment')
$(document).ready(() => {
ipcRenderer.send('page-ready');
moment().format();
$.getScript("./js/tempusdominus-bootstrap-4.min.js", function() {
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
});
})
require("bootstrap")
});
Things i've tried:我尝试过的事情:
So after some research i discovered it might be because jQuery was imported twice to make another js script work correctly so i fixed this by changing my code to:所以经过一些研究,我发现这可能是因为 jQuery 被导入了两次以使另一个 js 脚本正常工作,所以我通过将代码更改为:
const ipcRenderer = require('electron').ipcRenderer
const jQuery = require('jQuery');
const $ = jQuery.noConflict();
require('popper.js')
const moment = require('moment')
$(document).ready(() => {
ipcRenderer.send('page-ready');
moment().format();
$.getScript("./js/tempusdominus-bootstrap-4.min.js", function() {
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
});
})
require("bootstrap")
});
The code where the modal is called:调用模态的代码:
ipcRenderer.on("edit-self-result", (event, arg) => {
if (arg == false) {
$('#editMemberModal').modal('toggle');
document.getElementById("userTypeEdit").value = usertype
document.getElementById("usernameEdit").value = username
document.getElementById("emailEdit").value = email
}
})
我应该你试试这个。
$("..")[0].modal
After multiple hours of pulling my hair out, I managed to get a working solution I don't know why this fixes it but if anyone wants to alter this answer to explain why this works go ahead.经过几个小时的拔头发,我设法得到了一个有效的解决方案,我不知道为什么会解决这个问题,但是如果有人想改变这个答案来解释为什么会继续这样做。
But I changed my code from this:但我改变了我的代码:
const jQuery = require('jQuery');
const $ = jQuery.noConflict();
To this:对此:
global.jQuery = require('jquery');
global.$ = jQuery.noConflict();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.