Javascript 未捕获的TypeError:$(…)。步骤不是函数

Javascript 未捕获的TypeError:$(…)。步骤不是函数,javascript,jquery,html,laravel,jquery-steps,Javascript,Jquery,Html,Laravel,Jquery Steps,所以我在我的引导模板中看到了非常好看的表单,我想在我的项目中使用它们 我把我们需要导入的所有必需文件都放在了代码的底部,必需的文件都在正确的目录中,例如jquery步骤:C:\xampp\htdocs\rps\public\files\bower\u components\jquery.steps\js\jquery.steps.js <script src="/files/js/views/person/initialize-steps.js"></script> ..

所以我在我的引导模板中看到了非常好看的表单,我想在我的项目中使用它们

我把我们需要导入的所有必需文件都放在了代码的底部,必需的文件都在正确的目录中,例如jquery步骤:
C:\xampp\htdocs\rps\public\files\bower\u components\jquery.steps\js\jquery.steps.js

<script src="/files/js/views/person/initialize-steps.js"></script>
....
<script src="/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
'初始化步骤.js':

$(“#从业者表单”)。步骤({
头像:“h3”,
bodyTag:“字段集”,
过渡效果:“slideLeft”,
启用分页:true,
自动对焦:对,
onFinished:函数(事件、当前索引)
{
警惕(“从业者添加!”);
}
});
我的HTML文件的多种格式(…)被跳过部分:

<div class="card-block">
        <div class="row">
            <div class="col-md-12">
                <div id="practitioner-form">
                    <form method="post" id="practitioner-form" action="#">
                        <h3>Practitioner</h3>
                        <fieldset>
                            <legend>Practitioner Information</legend>
                            <div class="form-group row">
                                <div class="col-lg-12">
                                    <label for="effective_date" class="block">{{trans('personalData.effectiveDate')}}</label>
                                </div>
                                <div class="col-lg-12">
                                    <input id="effective_date" name="effectiveDate" type="date" class="form-control required">
                                </div>
                            </div>

(...)


<link rel="stylesheet" type="text/css" href="/files/bower_components/jquery.steps/css/jquery.steps.css">
<!-- Required Jquery -->
<script src="/files/js/views/person/initialize-steps.js"></script>
<script src="/files/bower_components/jquery/js/jquery.min.js"></script>
<script src="/files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script src="/files/bower_components/popper.js/js/popper.min.js"></script>
<script src="/files/bower_components/bootstrap/js/bootstrap.min.js"></script>
<!--Forms - Wizard js-->
<script src="/files/bower_components/jquery.cookie/js/jquery.cookie.js"></script>
<script src="/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
<script src="/files/bower_components/jquery-validation/js/jquery.validate.js"></script>

<script src="/files/js/modules/practitionerCompetence.js"></script>

专业人员
从业人员信息
{{trans('personalData.effectiveDate')}
(...)

当我尝试加载页面时,仍然会出现一个错误:
uncaughttypeerror:$(…)。steps不是一个函数
有人知道如何修复它吗?

像这样订购js将脚本放在末尾

<script src="/files/bower_components/jquery/js/jquery.min.js"></script>
<script src="/files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script src="/files/bower_components/popper.js/js/popper.min.js"></script>
<script src="/files/bower_components/bootstrap/js/bootstrap.min.js"></script>
<!--Forms - Wizard js-->
<script src="/files/bower_components/jquery.cookie/js/jquery.cookie.js"></script>
<script src="/files/bower_components/jquery.steps/js/jquery.steps.js"></script>
<script src="/files/bower_components/jquery-validation/js/jquery.validate.js"></script>

<script src="/files/js/modules/practitionerCompetence.js"></script>
<script src="/files/js/views/person/initialize-steps.js"></script>


jquery.steps.js
在您的
初始化steps.js之后加载

<script src="/files/js/views/person/initialize-steps.js"></script>
....
<script src="/files/bower_components/jquery.steps/js/jquery.steps.js"></script>

更改initialize-steps.js的加载顺序将其放在末尾在加载jquery和jquery之前,您首先运行代码。步骤它将不起作用
步骤
未定义,因此需要在调用
$()之前加载它。步骤