模态中的 Jquery 步骤失去了样式？

问题描述

我有一个相当简单的应用程序，所有页面都在一个面板中加载。在其中一个面板中，我打开一个模态来填写表单。模态第一次打开，格式如预期：

但是，如果我关闭模态再次打开它，样式就会消失，就好像还没有设置向导一样：

我正在挠头试图理解为什么。有人有想法吗？

这是代码：https://codepen.io/PatrickHatung/pen/WNoBoZr

谢谢

$(document).ready(function () {
            $('#bademmenu a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
            });

            $('#btnShowCreate').click(function() {
                $('#exampleModal').modal('show');

                if ($('#feri-form').is(":hidden")) {
                    initFeriCreate();
                }
            });

      function initFeriCreate() {
                var form = $("#feri-form").show();

                form.steps({
                    headerTag: "h3",bodyTag: "fieldset",buttonSelector: 'button',transitionEffect: "slideLeft",labels: {
                        next: 'Suivant',prevIoUs: 'Précédent',finish: 'Sauvegarder'
                    },onStepChanging: function (event,currentIndex,newIndex) {
                        // Always allow prevIoUs action even if the current form is not valid!
                        if (currentIndex > newIndex) {
                            return true;
                        }
                        // Needed in some cases if the user went back (clean up)
                        if (currentIndex < newIndex) {
                            // To remove error styles
                            form.find(".body:eq(" + newIndex + ") label.error").remove();
                            form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                        }

                        form.validate().settings.ignore = ":disabled,:hidden";
                        return form.valid();
                    },onStepChanged: function (event,priorIndex) {
                    },onFinishing: function (event,currentIndex) {
                        form.validate().settings.ignore = ":disabled";
                        return form.valid();
                    },onFinished: function (event,currentIndex) {
                        $('#feri-form').submit();
                        //alert("Submitted!");
                    }
                });

                form.submit(function(e) {
                    e.preventDefault();

                    if (parseInt($('#Documents').get(0).files.length) !== 3) {
                        alert("Veuillez s&#233;lectionner 3 documents");
                        return false;
                    }

                    return true;
                });

                $('#Documents').change(function() {
                    var filenames = '';
                    var documents = $('#Documents')[0];

                    for (var i = 0; i < documents.files.length; i++) {
                        filenames += '<li list-group-item>' + documents.files[i].name + '</li>';
                    }

                    $('.item-list').html('<ul class="list-group">' + filenames + '</ul>');
                });

                $('.datepicker').datepicker({
                    format: 'dd/mm/yyyy',language: 'fr',weekStart: 1,daysOfWeekHighlighted: "6,0",autoclose: true,todayHighlight: true,});

            }
        });

.wizard ul,.tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0
}

.wizard ul > li,.tabcontrol ul > li {
    display: block;
    padding: 0
}

.wizard > .steps .current-info,.tabcontrol > .steps .current-info {
    position: absolute;
    left: -999em
}

.wizard > .content > .title,.tabcontrol > .content > .title {
    position: absolute;
    left: -999em
}

.wizard > .steps {
    position: relative;
    display: block;
    width: 100%
}

.wizard.vertical > .steps {
    display: inline;
    float: left;
    width: 30%
}

.wizard > .steps .number {
    font-size: 14px;
}

.wizard > .steps > ul > li {
    width: 20%
}

.wizard > .steps > ul > li,.wizard > .actions > ul > li {
    float: left
}

.wizard.vertical > .steps > ul > li {
    float: none;
    width: 100%
}

.wizard > .steps a,.wizard > .steps a:hover,.wizard > .steps a:active {
    display: block;
    width: auto;
    margin: 0;
    font-size: 14px;
    padding: 5px 15px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard > .steps .disabled a,.wizard > .steps .disabled a:hover,.wizard > .steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default
}

.wizard > .steps .current a,.wizard > .steps .current a:hover,.wizard > .steps .current a:active {
    background: #3ea2a0;
    color: #fff;
    cursor: default
}

.wizard > .steps .done a,.wizard > .steps .done a:hover,.wizard > .steps .done a:active {
    background:  #c4dde9; /*#9dc8e2*/
    color: #fff
}

.wizard > .steps .error a,.wizard > .steps .error a:hover,.wizard > .steps .error a:active {
    background: #a8502f;
    color: #fff
}

.wizard > .content {
    background: #ffffff;
    display: block;
    /*margin: .5em;*/
    min-height: 700px;
    overflow: hidden;
    position: relative;
    width: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard.vertical > .content {
    display: inline;
    float: left;
    margin: 0 2.5% .5em 2.5%;
    width: 65%
}

.wizard > .content > .body {
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%
}

.wizard > .content > .body ul {
    list-style: disc !important
}

.wizard > .content > .body ul > li {
    display: list-item
}

.wizard > .content > .body > iframe {
    border: 0 none;
    width: 100%;
    height: 100%
}

.wizard > .content > .body input {
    display: block;
    margin-bottom: 10px;
}

.wizard > .content > .body input[type="checkBox"] {
    display: inline-block
}

.wizard > .content > .body input.error {
    background: #fbe3e4;
    border: 1px solid #fbe3e4;
    color: #8a1f11
}

.wizard > .content > .body label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 400;
}

.wizard > .content > .body label.error {
    color: #8a1f11;
    display: inline-block;
    /*margin-left: 1.5em*/
}

.wizard > .actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: flex-end;
}

.wizard.vertical > .actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%
}

.wizard > .actions > ul {
    display: inline-block;
    text-align: left
}

.wizard > .actions > ul > li {
    display: flex;
    justify-content: space-between;
    /*padding: 15px 0 15px 0;*/
    margin: 0 .5em
}

.wizard.vertical > .actions > ul > li {
    margin: 0 0 0 1em
}

.wizard > .actions a,.wizard > .actions a:hover,.wizard > .actions a:active {
    background: #3ea2a0;
    color: #fff;
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.wizard > .actions .disabled a,.wizard > .actions .disabled a:hover,.wizard > .actions .disabled a:active {
    background: #eee;
    color: #aaa
}

.wizard > .loading {
}

    .wizard > .loading .spinner {
    }

.tabcontrol > .steps {
    position: relative;
    display: block;
    width: 100%
}

.tabcontrol > .steps > ul {
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1
}

.tabcontrol > .steps > ul > li {
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.tabcontrol > .steps > ul > li:hover {
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0
}

.tabcontrol > .steps > ul > li.current {
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0
}

.tabcontrol > .steps > ul > li > a {
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none
}

.tabcontrol > .steps > ul > li > a:hover {
    text-decoration: none
}

.tabcontrol > .steps > ul > li.current > a {
    padding: 15px 30px 10px 30px
}

.tabcontrol > .content {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 35em;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px
}

.tabcontrol > .content > .body {
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%
}

.tabcontrol > .content > .body ul {
    list-style: disc !important
}

.tabcontrol > .content > .body ul > li {
    display: list-item
}

@media(max-width:600px) {
    .wizard > .steps > ul > li {
        width: 50%
    }

    .wizard > .steps a,.wizard > .steps a:active {
        margin-top: .5em
    }

    .wizard.vertical > .steps,.wizard.vertical > .actions {
        display: block;
        float: none;
        width: 100%
    }

    .wizard.vertical > .content {
        display: block;
        float: none;
        margin: 0 .5em .5em;
        width: auto
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <div class="col-sm-12 ml-auto mr-auto">
            <div class="nav-content">
                
                <nav class="nav nav-pills nav-justified ml-auto" role="tablist" id="bademmenu">
                        <a class="nav-link" href="#tabFeriCreate" data-toggle="tab" role="tab"><i class="fa fa-lg fa-file-signature"></i></a>
                        <a class="nav-link" href="#tabUserAdmin" data-toggle="tab" role="tab"><i class="fa fa-lg fa-users-cog"></i></a>
                </nav>

                <div class="tab-content">
                    <div id="tabFeriCreate" role="tabpanel" class="tab-pane fade">
                        <div class="col-sm-12 border border-primary shadow rounded w-auto p-2">
                            <a id="btnShowCreate" tclass="btn btn-primary mb-5" data-toggle="modal" data-target="#exampleModal" href="#"><i class="fa fa-plus-circle pr-5"></i>Nouveau formulaire</a>
                            <div>
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Col-1</th>
                                        <th scope="col">Col-2</th>
                                        <th scope="col"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>2</td>
                                                <td>3</td>
                                                <td><a href="#"><i class="fa fa-pencil"></i></a></td>
                                            </tr>
                                    </tbody>
                                </table>

                            </div>
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">FORM</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                      <form id="feri-form" action="/Feri/Create" style="display: none;" enctype="multipart/form-data">
                        <h3>Exportateur</h3>
                        <fieldset class="form-input">
                          <label for="ExporterCompanyName">Compagnie/Agence</label>
                          <input class="form-control required" id="ExporterCompanyName" name="ExporterCompanyName" type="text" value="" />

                          <label for="ExporterPhoneNumber">Num&#233;ro de t&#233;l&#233;phone</label>
                          <input class="form-control required" id="ExporterPhoneNumber" name="ExporterPhoneNumber" type="text" value="" />
                        </fieldset>

                        <h3>Importateur</h3>
                        <fieldset class="form-input">
                          <label for="ImporterCompanyName">Compagnie/Agence</label>
                          <input class="form-control required" id="ImporterCompanyName" name="ImporterCompanyName" type="text" value="" />

                        </fieldset>

                        <h3>Transitaire</h3>
                        <fieldset class="form-input">
                          <label for="ForwarderCompanyName">Compagnie/Agence</label>
                          <input class="form-control required" id="ForwarderCompanyName" name="ForwarderCompanyName" type="text" value="" />
                        </fieldset>

                        <h3>Cargaison &amp; Navire</h3>
                        <fieldset class="form-input">
                          <div class="form-group row">
                            <div class="col-md-4">
                              <label for="BillOfLoading">Num&#233;ro Bill of Loading</label>
                              <input class="form-control required" id="BillOfLoading" name="BillOfLoading" type="text" value="" />
                            </div>
                            <div class="col-md-4">
                              <label for="DateEmission">Date d&#39;&#233;mission BL</label>

                              <div class="input-group">
                                <input type="text" id="DateEmission" name="DateEmission" class="form-control datepicker" required readonly />
                                <label class="input-group-addon" for="DateEmission">
                                  <span class="btn btn-default"><span class="fa fa-calendar fa-lg"></span></span>
                                </label>
                              </div>
                            </div>
                          </div>
                        </fieldset>
                      </form>
                      
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

解决方法

事实证明，每次打开模态时，我都会初始化向导，这会更改 DOM。所以我决定使用布尔值 isFormInitialized，它只在第一次打开模态时触发一次设置