本文将深入探讨在使用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。
以下是修改后的代码：
立即学习“Java免费学习笔记（深入）”；
(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 结构：
Upload <div class="dz_params_item" data-entity_id="request_id?>" data-action_url="/files/upload/request_id?>" >
微信扫一扫 
支付宝扫一扫 
