未捕获的类型错误：$(...).steps 不是函数答案

【问题标题】：Uncaught TypeError: $(...).steps is not a function未捕获的类型错误：$(...).steps 不是函数
【发布时间】：2019-10-26 20:46:30
【问题描述】：

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

我把我认为我们需要导入的所有需要的文件都添加在代码的底部，需要的文件在正确的目录中，例如jquery步骤：C:\xampp\htdocs\rps\public\files\bower_components\jquery.steps\js\jquery.steps.js

'initialize-steps.js'：

$("#practitioner-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    enablePagination: true,
    autoFocus: true,
    onFinished: function (event, currentIndex)
    {
        alert("Practitioner Added!");
    }
});

我的带有多格式 (...) 的 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>

当我尝试加载页面时仍然出现错误：Uncaught TypeError: $(...).steps is not a function 有人知道如何解决吗？

【问题讨论】：

改变initialize-steps.js的加载顺序放在最后
你在加载 jquery 和 jquery.steps 之前先运行你的代码它不会工作
steps 未定义，因此需要在调用$().steps之前加载它

标签： javascript jquery html laravel jquery-steps

【解决方案1】：

jquery.steps.js 在initialize-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 之后它

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

【讨论】：

【解决方案2】：

像这样订购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>

【讨论】：