我有一个用for循环创建的类似<div>元素的列表。对于这些<div>元素中的每一个，我都有一个编辑信息的按钮。每次单击此编辑按钮时，都会打开一个包含Dropbox zone框的弹出窗口（使用Dropzone library）。现在，为了加载与每个<div>相关的图像，我使用jQuery更改了与图像ID关联的输入值。
但是，我需要从输入中读取更改后的ID，并在Dropzone的init函数中使用它。问题是Dropzone是在更改输入值之前创建的，并且在初始页面加载期间，它具有空值。我想在每次单击编辑按钮后重新运行Dropzone init函数，并使用与前一个函数相同的配置。
我现在将发布代码片段以供参考。

HTML文件：

@foreach($steps as $step)
    <div class="row card p-3 mb-3 d-flex justify-content-center">
        <div class="col-12 row justify-content-between align-self-center mb-2">
            
            <div class="col-6 p-0">

                <button type="button" class="btn update_step" title="update"
                        data-toggle="modal" data-target="#update_step_modal"
                        step_number="{{$step->number}}"
                        route="{{route('panel.contents.clusters.steps.update', [$content->id, 
                        $cluster->id, $step->id])}}">

                    <span class="mdi mdi-18px mdi-square-edit-outline"></span>
                </button>
              </div>
         </div>

         <div class="col-12 row justify-content-center align-self-center mb-2">
             <p class="col-12 step_description_p">{{$step->description}}</p>

             <div class="col-6 justify-content-center pt-4">
                 <input class="step_cover_id" value="{{$step->cover_id}}" hidden>
                 <img src="{{$step->cover_image}}">
              </div>

         </div>
    </div>      
@endforeach

模态HTML文件：

<div class="modal fade" id="update_step_modal" tabindex="-1" role="dialog" aria- 
      labelledby="update_step_modal" aria-hidden="true" data-keyboard="false" data- 
      backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="col-12 row justify-content-center align-self-center">
                    <form action="" method="POST" id="update_step_form">
                        @method('PATCH')
                        @csrf

                        <textarea name="description" id="update_step_description"></textarea>
                        <input name="cover_id" id="update_step_cover_id" hidden>
                        <input name="video_id" id="update_step_video_id" hidden>

                    </form>
                </div>

                <div class="col-12 row justify-content-center align-self-center mb-2">

                    <div class="col-6" id="update_step_cover_div">
                        <form action="{{url('panel/upload')}}" method="POST" 
                               class="dropzone" id="update_step_cover_form">
                            @csrf
                            <input name="type" value="step_cover" hidden />
                            <input name="content_id" value="{{$content->id}}" hidden />
                            <input name="cluster_id" value="{{$cluster->id}}" hidden />
                            <div class="dz-message" data-dz-message>
                                <span class="m-dropzone__msg-desc">some messages</span>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="d-flex justify-content-center">
                    <button type="button" class="btn" id="step_update_button">
                        <span class="ladda-label">update</span>
                        <span class="ladda-spinner"></span>
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>

JavaScript文件：

$('.update_step').on('click', function () {
   let step_number = $(this).attr('step_number')
   let route = $(this).attr('route')

   $('#edited_step_number').text(step_number)
   $('#update_step_form').attr('action', route)

   let parent = $(this).parent().parent().parent();
   let description = parent.find('.step_description_p').text();
   let cover_id = parent.find('.step_cover_id').val();
   let video_id = parent.find('.step_video_id').val();

   $('#update_step_description').val(description).change();
   $('#update_step_cover_id').val(cover_id).change();
   $('#update_step_video_id').val(video_id).change();
});

Dropzone.options.updateStepCoverForm = {
    paramName: "file", 
    uploadMultiple: false,
    acceptedFiles: "image/*,",
    maxFiles: 1,
    headers: {
        'X-CSRF-Token': $('input[name="_token"]').val(),
        'Accept': 'application/json'
    },
    addRemoveLinks: true,
    init: function() {
        let coverDropzone = this;
        let id = $('#update_step_cover_id').val()

        if(id !== ''){
            $.ajax({
                url: '/panel/fetch_file/' + id,
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    var mockFile = {name: response.data.file_name, size: response.data.size};

                    coverDropzone.emit("addedfile", mockFile);
                    coverDropzone.emit("thumbnail", mockFile, response.data.file_path);
                    coverDropzone.emit("complete", mockFile);
                    coverDropzone.options.maxFiles = 0;
                }
            });
        }

        this.on("removedfile", file => {
            let id = $('#update_step_cover_id').val()
            remove_file_function(id, "update_cover")
        });
    },
    accept: function(file, done) {
        done();
    },
    success: function (file, response) {
        $('#update_step_cover_id').val(response.data.id).change();
    },
    error: function (file, response) {
        error_function(file, response)
    }
};