為什么 jQuery click 事件在我的多步表單中多次不起作用？

Question

我使用 laravel 刀片和 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();
    });

});

Answer 1

（這里不是 laravel 用戶）

您應該避免使用多個 ID，例如#next_btn 。

嘗試使用.next-btn類，當單擊第二個字段集中的下一個 btn 時，它可能會修復 onclick 以檢索 step3 字段集。

注意：另外，將$(this).parents('fieldset')的第 n 次使用替換$(this).parents('fieldset')您創建的變量current_fs 。