jQuery 在 Laravel 5 中无法正常工作
Posted
技术标签:
【中文标题】jQuery 在 Laravel 5 中无法正常工作【英文标题】：jQuery not working properly in Laravel 5 【发布时间】：2015-12-03 22:41:05 【问题描述】：我创建了一个 Web 应用程序，它接受用户输入、查询 API、使用 php 处理数据，然后使用 jQuery 和 D3 将其呈现为一系列图形。我最初以程序方式设置它，但后来一直使用 Laravel 框架来实现它。我遇到的问题是 javascript 在最后一页中无法正常工作；我认为这与 Blade 模板系统的工作方式有关。
我知道它在加载初始图形时正在正确访问 JavaScript 文件。然而，有一些额外的功能可以根据不同的时间跨度重新加载图表，也可以滚动浏览图表中的数据。加载页面后，所有的 jQuery 都不起作用。
不管怎样，代码如下：
路由： routes.php (app\Http)
<?php
// perform GET request on root and call method 'index' on the PagesController class
// (app/Http/Controllers/PagesController.php)
Route::get('/', 'PagesController@index');
// perform POST on 'data' and call method 'process' on the PagesController class
Route::post('data', 'PagesController@process');
?>
基础模板： app.blade.php（资源\视图）
<!DOCTYPE html>
<html lang="en">
<head>
-- this stops the default compatibility view for intranet sites in IE --
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Academic Intelligence</title>
-- LINKS --
-- local css file --
!! HTML::style('css/style.css') !!
-- bootstrap css (bootswatch readable style) --
!! HTML::style('//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css') !!
-- SCRIPTS --
-- jquery --
!! HTML::script('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js') !!
-- bootstrap js --
!! HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js') !!
</head>
<body>
-- TITLE BAR --
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2><a href="https://resviz.ncl.ac.uk/wos/">Academic Intelligence</a></h2>
</div>
<div class="sg-content">
-- NAVIGATION BAR --
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href=" action('PagesController@index') "><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href=" action('PagesController@about') ">About</a></li>
</ul>
</div> -- navbar-collapse --
</div> -- container --
</nav> -- navbar --
-- main content --
<section class="container">
-- unique section to other pages --
@yield('content')
</section> -- main content; container --
</div> -- sg-content --
-- FOOTER --
</body>
</html>
主页： home.blade.php（资源\视图\页面）
-- this HTML is inserted into app.blade.php as content --
@extends('app')
@section('content')
-- local script --
!! HTML::script('js/script.js') !!
<div class="row">
-- search form --
-- using Illuminate\Html\HtmlServiceProvider package --
!! Form::open(['url' => 'data', 'id' => 'form']) !!
<fieldset>
<div class="form-group">
-- see http://getbootstrap.com/css/#grid for explanation of Bootstrap grid system --
<div class="col-lg-6 well bs-component">
-- 'journal(s) section of form' --
<div class="journal_fields_wrap">
-- 'journal(s)' section header --
<h4 class="form_title">Journal</h4>
-- buttons above 'journal(s)' input boxes --
<div class="journal_buttons">
-- loads a list of journals on Web of Science --
<a class="btn btn-success" target="_blank" href="http://ip-science.thomsonreuters.com/cgi-bin/jrnlst/jloptions.cgi?PC=D"
data-toggle="tooltip-down" title="Search Thomson Reuters for journals">Journal List</a>
-- add extra input field for journals --
!! Form::button('<span class="glyphicon glyphicon-plus"></span> Add more fields', ['class' => 'add_journal_field_button btn btn-info']) !!
</div> -- journal_buttons --
-- input box for journal(s) --
<div class="form_field">
-- parameters: textbox(name, default value, options array) --
!! Form::text('journal1', null, ['class' => 'form-control', 'data-toggle' => 'tooltip-right', 'title' => 'Please enter only one journal per box']) !!
</div> -- form_field --
</div> -- journal_fields_wrap --
-- 'keyword(s)' section of form --
<div class="title_fields_wrap">
-- 'keyword(s)' section header --
<h4 class="form_title">Keyword</h4>
-- buttons above 'keyword(s)' input boxes --
<div class="title_buttons">
-- add extra input field for keywords --
!! Form::button('<span class="glyphicon glyphicon-plus"></span> Add more fields', ['class' => 'add_title_field_button btn btn-info']) !!
</div> -- title_buttons --
-- input box for keyword(s) --
<div class="form_field">
-- parameters: textbox(name, default value, options array) --
!! Form::text('title1', null, ['class' => 'form-control', 'data-toggle' => 'tooltip-right', 'title' => 'Please enter only one title per box']) !!
</div> -- form_field --
</div> -- title_fields_wrap --
-- 'time span' section of form; header --
<h4 class="form_title">Time Span</h4></br>
-- 'From:' header --
!! Form::label('select', 'From:', ['class' => 'col-lg-2 control-label']) !!
<div class="col-lg-3">
-- parameters: selectbox(name, [data], default, [options]) --
-- data (years) provided by script.js --
!! Form::select('timeStart', [], 'Select', ['class' => 'form-control', 'id' => 'select']) !!
</div> -- col-lg-3 --
-- 'To:' header --
!! Form::label('select', 'To:', ['class' => 'col-lg-2 control-label']) !!
<div class="col-lg-3">
-- as other select box above --
!! Form::select('timeEnd', [], 'Select', ['class' => 'form-control', 'id' => 'select']) !!
</div> -- col-lg-3 --
<br/><br/>
-- execute search; submit button --
-- parameters: button(text on button, [options]) --
!! Form::button('<strong>Submit</strong><span class="glyphicon glyphicon-transfer"></span>', ['type' => 'submit', 'class' => 'btn btn-primary btn-lg', 'id' => 'submit']) !!
</div> -- col-lg-6 --
<div class="col-lg-6 well bs-component">
-- bootstrap window --
<div class="modal-dialog">
<h4>Notes</h4>
<p>This application is optimised for Chrome.</p>
<p>In order to get the best results from your search,<br/>enter one or more journals.</p>
<p>Keywords and time spans are optional but can be<br/>used to refine your search.</p>
</div> -- modal-dialog --
</div> -- col-lg-6 --
</div> -- form-group --
</fieldset>
!! Form::close() !!
</div> -- row --
@stop
数据显示： data.blade.php（资源\视图\页面）
@extends('app')
@section('content')
<!-- d3 -->
!! HTML::script('https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js') !!
<!-- local script -->
!! HTML::script('js/graphs.js') !!
<section class="graphs container">
<div class="row col-lg-12" id="header">
<div class="col-lg-1"></div>
<div class="panel panel-info col-lg-7">
<div class="panel-heading">
<h2 class="panel-title">Search Parameters</h2>
</div>
<div class="panel-body">
<div id="journalData"></div>
<div id="keywordData"></div>
<div id="timescaleData"></div>
</div>
</div> <!-- panel panel-info -->
<div class="dropdown col-lg-2">
<div class="form-group">
<label for="select" class="control-label">Change time span:</label>
<select class="form-control" id="timeSelect">
<option value="chart2" selected>User defined</option>
<option value="chart4">Last 10 years</option>
<option value="chart5">Last 5 years</option>
<option value="chart6">Last 2 years</option>
</select>
</div>
</div> <!-- dropdown -->
<div class="col-lg-2"></div>
</div> <!-- row -->
<div class="graph_fields_wrap row backdrop col-lg-12">
<div class="col-lg-6">
<h3 class="titles">Ranked Author Citations</h3>
<h4 class="titles">All time (from 1970)</h4>
<button class="pager" id="previous1" type="button" disabled><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
<button class="pager indexer" type="button" disabled>1 - 10</button>
<button class="pager" id="next1" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
<div class="chart1 well bs-component"></div>
</div>
<div class="col-lg-6">
<h3 class="titles">Ranked Author Citations</h3>
<h4 class="titles" id="userTitle"></h4>
<button class="pager" id="previous2" type="button" disabled><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
<button class="pager indexer" type="button" disabled>1 - 10</button>
<button class="pager" id="next2" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
<div class="chart2 well bs-component"></div>
</div>
</div> <!-- row -->
</br>
<div class="row col-lg-12">
<div class="row backdrop col-lg-7" id="impact">
<h3 class="titles">Weighted Citation Factor</h3>
<h4 class="titles">All time (from 1970)</h4>
<div class="well bs-component" id="rankChart">
<div class="chart3"></div>
</div>
</div> <!-- row -->
<div class="backdrop col-lg-5" id="algorithm">
<h3 class="titles">Explanation of Bubble Chart</h3>
<div class="well bs-component">
<p>The weighted citation factor applies a weighting to citations based on the year of publication. The more recent the citation, the higher the weighting.</p>
<p>This chart takes into account data from all years. The higher the weighted citation factor, the larger the bubble.</p>
</div>
</div>
</div> <!-- col-lg-12 -->
</br>
<div class="graph_fields_wrap2 row backdrop col-lg-12">
<div class="col-lg-6">
<h3 class="titles">Ranked Awarded Funds (£millions)</h3>
<h4 class="titles">All time, UK only</h4>
<div class="chart7 well bs-component"></div>
</div>
<div class="col-lg-6">
<h3 class="titles">Ranked Awarded Funds (£millions)</h3>
<h4 class="titles userTitle">, UK only</h4>
<div class="chart8 well bs-component"></div>
</div>
</div> <!-- row -->
</section>
@stop
PHP 处理： PagesController.php (app\Http\Controllers)
<?php namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Request;
use App\SoapController;
use App\Models\SearchData;
use App\Models\SoapWrapper;
use App\Models\RestWrapper;
use App\Models\DataSort;
use App\Models\BubbleChartCompatible;
use DB;
use View;
use Laracasts\Utilities\JavaScript\JavaScriptFacade as JavaScript;
class PagesController extends Controller
public function __construct()
$this->middleware('guest');
// method index returns view 'home' (resources/views/home.blade.php)
public function index()
return view('pages.home');
// method process returns view 'data' (resources/views/data.blade.php)
public function process()
... processes data ...
// pass data to JavaScript (uses https://github.com/laracasts/PHP-Vars-To-Js-Transformer)
JavaScript::put([
'allCited' => $allCited,
'userCited' => $userCited,
'tenCited' => $tenCited,
'fiveCited' => $fiveCited,
'twoCited' => $twoCited,
'valueData' => $valueData,
'allFunded' => $allFunds,
'userFunded' => $userFunds,
'tenFunded' => $tenFunds,
'fiveFunded' => $fiveFunds,
'twoFunded' => $twoFunds,
'searchData' => $searchParams
]);
return View::make('pages.data');
JAVASCRIPT: graphs.js (public\js)
$(document).ready(function()
// pull data from PHP
// CITES
var allCitedData = $.parseJSON(Graphs.allCited);
var userCitedData = $.parseJSON(Graphs.userCited);
var tenCitedData = $.parseJSON(Graphs.tenCited);
var fiveCitedData = $.parseJSON(Graphs.fiveCited);
var twoCitedData = $.parseJSON(Graphs.twoCited);
// VALUES; leave in JSON format
var valueData = Graphs.valueData;
// FUNDS
var allFundedData = $.parseJSON(Graphs.allFunded);
var userFundedData = $.parseJSON(Graphs.userFunded);
var tenFundedData = $.parseJSON(Graphs.tenFunded);
var fiveFundedData = $.parseJSON(Graphs.fiveFunded);
var twoFundedData = $.parseJSON(Graphs.twoFunded);
// USER SEARCH PARAMETERS
var searchData = Graphs.searchData;
// different colour settings for graphs
var palette1 =
fill: "steelblue",
hover: "brown"
;
var palette2 =
fill: "seagreen",
hover: "darkorange"
;
var palette3 =
fill: "darkblue",
hover: "darkmagenta"
;
var palette4 =
fill: "darkolivegreen",
hover: "darkseagreen"
;
// set title for user defined graph
var graphTitle = $(".userTitle");
console.log(searchData.from + " to " + searchData.to);
graphTitle.prepend(searchData.from + " to " + searchData.to);
// change graph according to dropdown choice
var wrapperG = $(".graph_fields_wrap1"); // wrapper for div containing citations graphs
var wrapperF = $(".graph_fields_wrap2"); // wrapper for div containing funds graphs
var selector = $("#timeSelect"); // dropdown graph menu ID
// variables to log subset location in arrays (to use in slice)
var from1 = 0;
var to1 = 10;
var from2 = 0;
var to2 = 10;
var from3 = 0;
var to3 = 10;
var from4 = 0;
var to4 = 10;
var from5 = 0;
var to5 = 10;
var selected = "chart2";
// when the selection is changed in the dropdown menu do:
selector.on("change", function(e)
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
$(wrapperF.children()[1]).remove();
// get value of currently selected
var selectedVal = $(this).val();
selected = selectedVal;
// check value of selected
// append new graph to wrapper div & run loadGraph to reprocess data
if (selectedVal == "chart2")
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>1-10</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph(userCitedData.slice(0,10), selectedVal, palette2);
wrapperF.append("<div class='col-lg-6'><h3 class='titles'>Ranked Awarded Funds (£millions)</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + ", UK only</h4><div class='chart8 well bs-component'></div></div>").loadGraph(userFundedData.slice(0,10), "chart8", palette4);
else if
... etc ...
);
/*****************************************/
/*********** PAGINATION *****************/
/*****************************************/
// ALL TIME CITED, chart1
// next author set
wrapperG.on("click", "#next1", function (e)
// ignore default action for this event
e.preventDefault();
// shift pointers up 10 for next subset of array
from1 += 10;
to1 += 10;
// check if at end of data
if (to1 > (allCitedData.length))
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button' disabled>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
else
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
);
// all time cited, previous author set
wrapperG.on("click", "#previous1", function (e)
// ignore default action for this event
e.preventDefault();
// shift pointers down 10 for previous subset of array
from1 -= 10;
to1 -= 10;
// check if at start of data
if (from1 == 0)
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
else
// remove currently displayed graph, 0th child of div
$(wrapperG.children()[0]).remove();
// load new graph before other graph (0th child of div)
wrapperG.prepend("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from1+1) + " - " + to1 + "</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((allCitedData.slice(from1,to1)), "chart1", palette1);
);
// OPTIONS CITED, charts 2, 4, 5 & 6
// optional cited, next author set
wrapperG.on("click", "#next2", function (e)
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
// check selectedVal to see which graph to append
switch(selected)
case ("chart2"):
// shift pointers up 10 for next subset of array
from2 += 10;
to2 += 10;
// check if at end of data
if (to2 >= (userCitedData.length))
// load new graph after other graph (1st child of div)
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button' disabled>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
else
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
break;
... etc ...
);
// optional cited, previous author set
wrapperG.on("click", "#previous2", function (e)
// ignore default action for this event
e.preventDefault();
// remove currently displayed graph, 1st child of div (1st graph is 0th)
$(wrapperG.children()[1]).remove();
// check selectedVal to see which graph to append
switch(selected)
case ("chart2"):
// shift pointers down 10 for previous subset of array
from2 -= 10;
to2 -= 10;
// check if at start of data
if (from2 == 0)
// load new graph after other graph (1st child of div)
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button' disabled><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
else
wrapperG.append("<div class='col-lg-6'><h3 class='titles'>Ranked Author Citations</h3><h4 class='titles'>" + searchData.from + " to " + searchData.to + "</h4><button class='pager' id='previous2' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager indexer' type='button' disabled>" + (from2+1) + " - " + to2 + "</button><button class='pager' id='next2' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart2 well bs-component'></div></div>").loadGraph((userCitedData.slice(from2,to2)), "chart2", palette2);
break;
case ("chart4"):
... etc ...
);
// create array to store various chart names
var fundedCharts = [
"chart7",
"chart8",
"chart9",
"chart10",
"chart11"
];
// Immediately Invoked Function Expression: allows '$' to work with any other plugins
(function ($)
// add function to '$.fn' object (contains all jQuery object methods)
$.fn.loadGraph = function(graphData, graphSelect, graphColour)
... creates graph from data ...
(jQuery));
// bubble chart
(function ($)
$.fn.loadBubbles = function(graphData, graphSelect)
... creates bubble chart from data ...
(jQuery));
// load initial graphs to page, 1st 10 authors
$(".chart1").loadGraph(allCitedData.slice(0,10), "chart1", palette1);
$(".chart2").loadGraph(userCitedData.slice(0,10), "chart2", palette2);
$(".chart3").loadBubbles(valueData, "chart3");
$(".chart7").loadGraph(allFundedData.slice(0,10), "chart7", palette3);
$(".chart8").loadGraph(userFundedData.slice(0,10), "chart8", palette4);
);
我超出了我的字符数限制，因此不得不删掉一些代码，但我认为我已经留下了识别问题的重要部分。
基本上它可以很好地加载带有图表的页面，但是如果您尝试使用#timeSelect 下拉列表加载新图表或使用#next1 滚动数据，则不会发生任何事情。
如果您需要更多信息，请告诉我 - 谢谢。
** 附加信息 **
我使用https://github.com/laracasts/PHP-Vars-To-Js-Transformer 将我的数据放到视图中以加载图表。当您使用它时，它会向config 发布一个名为javascript.js 的文件。我已经更改了它以适应我的应用程序，但这可能是我出错的地方。这是我修改后的文件：
javascript.php（配置）
return [
'bind_js_vars_to_this_view' => 'pages.data',
'js_namespace' => 'Graphs'
];
【问题讨论】：
检查您的浏览器控制台 请发布更多代码。 @GaneshGhalame 控制台中没有错误 @VincentDecaux 我知道这是一个荒谬的代码量，但是因为我不知道错误在哪里，所以我不知道要显示哪个代码！ 什么都没有发生？您是否尝试将 console.logs 添加到 .change 和 .click 处理程序以确保它们按预期触发？ 【参考方案1】：您发布了很多代码，而不是关于失败的细节。无论如何，我的建议是尝试在所有 HTML 代码之后使用您的 Javascript 代码，无论是否使用刀片，订单很重要。因此，您需要确保在执行您的 javascript 代码之前调用所有库，并且最好在您的 html 代码已经呈现（在页脚的末尾）之后执行所有这些操作。
【讨论】：
谢谢，起初我不确定失败的原因和位置，因此是所有代码。正如您所说，我认为问题在于加载库的时间。我离开了一个星期，但当我回来时会尝试移动脚本链接。我认为你是对的，这就是问题所在。感谢您的帮助。 完美，如果需要更多帮助，请告诉我。 还要检查你的 jquery.min.js 是否加载，有些时候我们的脚本是先加载，然后是我们的 jquery 文件，所以我们的脚本不能正常工作。所以我更喜欢先加载我们的 jquery.min.js 文件，然后是我们的自定义 javascript 文件。【参考方案2】：尝试改变：
selector.on("change", function(e)
为：
$(document).on('change', '#timeSelect', function(e)
也许你的$(document).ready(); 执行得比它应该的早
【讨论】：
【参考方案3】：您很可能正在尝试访问尚未准备好的元素，#next 不工作并且也未包装。只需将所有代码包装在 $( document ).ready()
$( document ).ready(function()
);
或将所有代码放在页面底部 - $(document).ready(function()); vs script at the bottom of page
【讨论】：
【参考方案4】：这对我有用。 jquery 加载正常但无法正常工作。我不确定您是否需要调用 bootstrap 和 jquery 脚本，因为 laravel 包含它们。
我发现 Laravel 在设置导航栏/登录系统时会调用 jquery。在标题中你会发现：
<script src=" asset('js/app.js') " defer ><script>
我刚刚删除了 'defer' 并启动了 jquery。
<script src=" asset('js/app.js') " ></script>
【讨论】：
以上是关于jQuery 在 Laravel 5 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
无法通过 jquery Ajax 在 laravel 5 中发布
Laravel 身份验证在 laravel 5.3 中无法正常工作