为啥 jQuery click 事件在我的多步骤表单中不能多次工作？

Posted 2023-03-14

【中文标题】为啥 jQuery click 事件在我的多步骤表单中不能多次工作？

【英文标题】：why the jQuery click event does not work multiple times in my multi-step form?为什么 jQuery click 事件在我的多步骤表单中不能多次工作？

【发布时间】：2020-04-01 07:18:45

【问题描述】：

我使用 laravel Blade 和 jquery，我想用几个步骤制作一个表单， 除了下一个按钮，一切正常，当我在第一个字段集中使用它时没关系，但在第二个字段集中它不再起作用我的意思是当我第二次点击时没有任何反应，有人可以检查我的代码或给出提示？

@section('content')
    <div class="page-content get-a-quote get-a-quote-2">
        <div class="container-fluid">

            <div class="row p-5 bg-whitesmoke">
            !! Form::open(['route' => '','class'=> 'col-12']) !!
            <!-- start -->
                <!-- step-1 -->
                <fieldset>
                    <h3 class="text-capitalize">profil</h3>
                    <div class="bg-white p-5">
                        <!-- full name -->
                        <div class="form-group row ">
                            <label for="inputEmail3" class="col-sm-4 col-form-label">Nom et prénom</label>
                            <div class="col-sm-8">
                                 Form::text('nom_et_prenoms', null, ['class' => 'form-control']) 
                            </div>
                        </div>

                        <!-- next boutton  -->
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <button   type="button" class="btn btn-primary" id="next_btn">Suivant</button>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <!-- step-2 -->
                <fieldset>
                    <h3 class="text-capitalize">Coordonnées</h3>
                    <div class="bg-white p-5">

                        <div class="form-group row ">
                            <label for="inputEmail3" class="col-sm-4 col-form-label">email
                            </label>
                            <div class="col-sm-8">
                                 Form::email('email', null, ['class' => 'form-control', 'required']) 
                            </div>
                        </div>


                        <div class="form-group row">
                            <div class="col-sm-10">
                                <button  type="button" class="btn btn-primary" id="prev_btn">Précédent</button>
                                <button  type="button" class="btn btn-primary" id="next_btn">Suivant</button>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <!-- step-2 -->
                <fieldset>
                    <h3 class="text-capitalize">assurance</h3>
                    <div class="bg-white p-5">

                        <div class="form-group row ">
                            <label for="inputEmail3" class="col-sm-4 col-form-label">Date de début
                            </label>
                            <div class="col-sm-8">
                                 Form::date('date_de_debut', \Carbon\Carbon::now(), ['class' => 'au-form-control au-form-radius', 'required', 'placeholder'=> 'jj-mm-aaaa']) 
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-primary" id="prev_btn">
                                    précédent
                                </button>
                                <button type="submit" class="btn btn-primary" id="submit_btn">
                                    Lancer le simulateur
                                </button>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <!-- end -->
                !! Form::close() !!
            </div>
        </div>
    </div>
@endsection

我的 javascript(jquery):

$(document).ready(function()

    var current_fs, next_fs, previous_fs; //fieldsets

    $("#next_btn").click(function() 
        current_fs = $(this).parents('fieldset');
        next_fs = $(this).parents('fieldset').next();
        //show the next fieldset
        next_fs.show();
        // hide the current fieldset
        current_fs.hide();
    );

    $("#prev_btn").click(function() 
        current_fs = $(this).parents('fieldset');
        previous_fs = $(this).parents('fieldset').prev();
        //show the previous fieldset
        previous_fs.show();
        //hide the current fieldset with style
        current_fs.hide();
    );

);

【参考方案1】：

（这里不是 laravel 用户）

您应该避免使用多个 ID，例如 #next_btn。

尝试改用 .next-btn 类，它可能会修复 onclick 以在单击第二个字段集中的下一个 btn 时检索 step3 字段集。

注意：另外，将第 n 次使用 $(this).parents('fieldset') 替换为您创建的变量 current_fs。