首页 > 文章 > 前端

获取模态窗口数据的正确方法：JS事件处理详解

时间：2025-09-27 20:45:31 174浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《获取模态窗口数据的正确方法：JS事件处理全解析》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

获取模态窗口关联数据的正确方法：JavaScript事件处理详解

本文将深入探讨在使用Bootstrap模态窗口和Dropzone.js上传文件时，如何正确获取触发按钮关联的数据属性。问题在于，最初的代码尝试在模态窗口的shown.bs.modal事件触发时获取data-action_url，但由于事件触发的时机问题，导致无法正确获取该属性。为了解决这个问题，我们将修改事件绑定方式，并利用jQuery的DOM操作来确保在模态窗口初始化Dropzone实例时，能够准确地获取到所需的URL。

问题分析

原始代码尝试在模态窗口显示后（shown.bs.modal事件）获取data-action_url。然而，此时事件对象e并不指向触发模态窗口的按钮，因此无法通过$(e.currentTarget)来定位到包含data-action_url的元素。

解决方案：使用 click 事件

一个有效的解决方案是将事件绑定到触发模态窗口的按钮的 click 事件上。这样，当用户点击按钮时，我们可以直接访问按钮及其父元素，从而获取到data-action_url。

以下是修改后的代码：

(function($){
    let $modalId = '#modal-upload';
    let $filesDropzone = null;
    let $parallelUploads = 100;
    let $maxFiles = 10;
    let $files = [];

    $.dispatcherFiles = {

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            uploadFilesModal: function (e) {
                $($modalId).modal('toggle');

                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');

                console.log(dropzoneParamEl);
                console.log(action_url);

                $($modalId + ' #filesDropzone').addClass('dropzone');

                $filesDropzone = new Dropzone($modalId + ' .dropzone', {
                    url: action_url,
                    uploadMultiple: true,
                    parallelUploads: $parallelUploads,
                    maxFiles: $maxFiles,
                });

                $filesDropzone.on('error', function() {
                    $(that.$modalId).modal('hide');
                    alert('error');
                });

                $filesDropzone.on('success', function(file, response) {
                    $($modalId).modal('hide');
                });
            },
        },

        events: function(){
            this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

代码解释：

事件绑定修改： this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this)); 将事件绑定到所有class为 .btnUpload 的元素的 click 事件上。
uploadFilesModal 函数：
- $(e.currentTarget)：在 click 事件中，e.currentTarget 指向触发事件的按钮（即 .btnUpload 元素）。
- $(e.currentTarget).closest('.field_form').find('.dz_params_item')：通过 closest() 找到最近的父元素 .field_form，然后在其中找到 .dz_params_item 元素。
- $(dropzoneParamEl).attr('data-action_url')：获取 .dz_params_item 元素的 data-action_url 属性值。
- $($modalId).modal('toggle');：手动触发模态框的显示。

HTML 结构：

<div class="form-group">
  <div class="field">
      <label>Photos</label>
      <div class="field_info" data-field_photo_id="5">
          <div class="value" data-item_id=""></div>
      </div>
      <div class="field_form">
          <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
              <i class="fa fa-cloud-upload"></i> Upload
          </a>
          <div class="dz_params_item"
            data-entity_id="<?=$item->request_id?>"
            data-action_url="/files/upload/<?=$item->request_id?>"
          ></div>
      </div>
  </div>
</div>

<div class="form-group">
  <div class="field">
      <label>Photos</label>
      <div class="field_info" data-field_photo_id="6">
          <div class="value" data-item_id=""></div>
      </div>
      <div class="field_form">
          <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
              <i class="fa fa-cloud-upload"></i> Upload
          </a>
          <div class="dz_params_item"
            data-entity_id="<?=$item->request_id?>"
            data-action_url="/files/upload/<?=$item->request_id?>"
          ></div>
      </div>
  </div>
</div>

<div class="form-group">
  <div class="field">
      <label>Photos</label>
      <div class="field_info" data-field_photo_id="7">
          <div class="value" data-item_id=""></div>
      </div>
      <div class="field_form">
          <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
              <i class="fa fa-cloud-upload"></i> Upload
          </a>
          <div class="dz_params_item"
            data-entity_id="<?=$item->request_id?>"
            data-action_url="/files/upload/<?=$item->request_id?>"
          ></div>
      </div>
  </div>
</div>

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Upload files
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <div id="filesDropzone"></div>
            </div>
        </div>
    </div>
</div>

CSS:

.field {
  margin: 50px;
}

依赖:

确保引入以下依赖：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js" integrity="sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B+INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

总结

通过将事件绑定到 click 事件，并使用 jQuery 的 DOM 操作，我们可以在模态窗口打开之前获取到触发按钮关联的 data-action_url 属性。这使得我们能够在初始化 Dropzone 实例时，使用正确的 URL，从而实现正确的文件上传功能。这种方法确保了代码的可靠性和可维护性，同时也避免了由于事件触发时机问题而导致的数据获取错误。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~