我無法讓 bootstrap 和 jQuery 與 Laravel 8 配合得很好。我嘗試多次從 scrats 構建應用程式，遵循各種教程，并確保認真遵循這些步驟。但是，沒有骰子。我的按鈕是不可點擊的，我懷疑應該在點擊時觸發的功能甚至根本沒有運行。
該應用程式是使用以下命令設定的：
laravel new name-of-app
composer require laravel/ui
php artisan ui bootstrap --auth
npm install bootstrap@latest @popperjs/core jquery jquery-ui --save-dev
npm run dev
webpack.mix.js：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/theme.js', 'public/js')
.js('resources/js/custom.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/theme.css', 'public/css')
.css('resources/css/custom.css', 'public/css')
.sourceMaps();
應用程式.js：
window.$ = window.jQuery = require('jquery');
import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/ui/widgets/tooltip.js';
require('./bootstrap');
require('@popperjs/core');
bootstrap.js：
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('@popperjs/core');
window.bootstrap = require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
主題.js：
(function ($) {
"use strict";
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
var path = window.location.href;
$("#layoutSidenav_nav .sidenav a.nav-link").each(function () {
if (this.href === path) {
$(this).addClass("active");
}
});
// Toggle the side navigation
$("#sidebarToggle").on("click", function (e) {
console.log('clicked');
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
});
// Click to collapse responsive sidebar
$("#layoutSidenav_content").click(function () {
console.log('clicked2');
const BOOTSTRAP_LG_WIDTH = 992;
if (window.innerWidth >= 992) {
return;
}
if ($("body").hasClass("sidenav-toggled")) {
$("body").toggleClass("sidenav-toggled");
}
});
})(jQuery);
現在，在 app.js 中，如果我洗掉
import 'jquery-ui/ui/widgets/datepicker.js';
或者
import 'jquery-ui/ui/widgets/tooltip.js';
在 Web 瀏覽器的控制臺中，我會看到 datepicker()/tooltip() 未定義的錯誤（對于檔案 theme.js），所以我知道檔案已加載。但是單擊帶有 id sidebarToggle 的按鈕，沒有任何反應。不是console.log運行，我完全不知道可能出了什么問題。
另外，我的 HTML 頭，如果有幫助的話：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="webapp for purposes">
<meta name="author" content="T5k">
{{-- CSRF Token --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'name-of-app') }}</title>
<link rel="icon" type="image/png" href="{{ asset('icon.ico') }}">
{{-- Scripts --}}
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/theme.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/custom.js') }}"></script>
{{-- Styles & Fonts --}}
<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" type="text/css" href="{{ mix('css/theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ mix('css/custom.css') }}">
</head>
感謝您的時間。我希望我遺漏了一些明顯的東西，這是一個簡單的解決方法。我正在使用依賴于引導程式的 sb-admin-2 主題。需要 jQuery 是因為它讓我的生活變得更加輕松......除了現在，現在它讓它變得悲慘:)
uj5u.com熱心網友回復：
您不共享整個 HTML，所以我只是在這里猜測，但您有可能theme.js在 HTML 檔案完全加載之前嘗試附加單擊事件偵聽器，因此#sidebarToggle在腳本執行時沒有元素。
嘗試將<script>標簽移入元素底部<body>或將函式包裝在$(document).ready(function () {});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421591.html
標籤：