获取模态窗口关联数据的正确方法：JavaScript事件处理详解
本文
将深入探讨使用Bootstrap模态窗口和Dropzone.js上传文件时，如何正确获取触发按钮关联的数据属性。问题是，最初的代码尝试在模态窗口的show.bs.modal事件触发时获取data-action_url，但由于事件触发的时间问题，导致无法正确获取该属性。为了解决这个问题，我们将修改绑定方式，并利用jQuer y的DOM操作来确保在模态窗口初始化Dropzone实例时，能够准确地获取到需要的URL。问题分析
原始代码尝试在模态窗口后（如图所示.bs.modal事件）获取data-action_url。然而，此时事件对象e并不指向触发模态窗口的按钮，显示因此包含通过$(e.currentTarget)来定位到data-action_url的元素。解决方案：使用点击事件
一个有效的解决方案将事件绑定到触发模式窗口的按钮的点击 事件上。这样，当用户点击按钮时，我们可以直接访问按钮其父元素，从而获取到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')； }， 函数： { 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.$bod
y.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))；将事件绑定到所有类为 .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 结构： HyperWrite
AI写作助手帮助你创作内容更自信 54 查看详情 lt；div class=quot；form-groupquot；gt； lt；div class=quot；fieldquot；gt； lt；labelgt；Photoslt；/labelgt； lt；div class=quot；field_infoquot； data-field_photo_id=quot；5quot；gt； lt；div class=quot；valuequot； data-item_id=”；”gt；lt；/divgt； lt；/divgt； lt；div class=”；field_form”；gt； lt；a class=”；btn btn-dark btn-md btnUpload”； data-toggle=”；modal”； href=”；#”； data-target=”；#modal-upload”；gt； lt；i class=”；fa fa-cloud-uploadquot；gt；lt；/igt；上传lt；/agt； lt；div class=quot；dz_params_itemquot； data-entity_id=quot；lt；?=$item-gt；request_id?gt；quot； data-action_url=quot；/files/upload/lt；?=$item-gt；request_id?gt；quot； gt；lt；/divgt； lt；/divgt； lt；/divgt；lt；/divgt；lt；div class=quot；form-groupquot；gt； lt；div class=quot；fieldquot；gt； lt；labelgt；Photoslt；/labelgt； lt；div class=quot；field_infoquot； data-field_photo_id=quot；6quot；gt； lt；div class=quot；valuequot； data-item_id=quo
t；quot；gt；lt；/divgt； lt；/divgt； lt；div class=quot；field_formquot；gt； lt；a class=quot；btn btn-dark btn-md btnUploadquot； data-toggle=quot；modalquot； href=quot；#quot； data-target=quot；#modal-uploadquot；gt； lt；i class=quot；fa fa-cloud-uploadquot；gt；lt；/igt； 上传 lt；/agt； lt；div class=quot；dz_params_itemquot； data-entity_id=quot；lt；?=$item-gt；request_id?gt；quot； data-action_url=quot；/files/upload/lt；?=$item-gt；request_id?gt；quot； gt；lt；/divgt； lt；/divgt； lt；/divgt；lt；/divgt；lt；/divgt；lt；div class=quot；form-groupquot；gt； lt；div class=quot；fieldquot；gt； lt；labelgt；照片lt；/labelgt； lt；div class=quot；field_infoquot； data-field_photo_id=quot；7quot；gt； lt；div class=quot；valuequot； data-item_id=quot；quot；gt；lt；/divgt； lt；/divgt； lt；div class=quot；field_formquot；gt； lt；a class=quot；btn btn-dark btn-md btnUploadquot； data-toggle=quot；modalquot； href=quot；#quot； data-target=quot；#modal-uploadquot；gt； lt；i class=quot；fa fa-cloud-uploadquot；gt；lt；/igt； 上传 lt；/agt； lt；div class=quot；dz_params_itemquot； data-entity_id=quot；lt；?=$item-gt；request_id?gt；quot； data-action_url=quot；/files/upload/lt；?=$item-gt；request_id?gt；quot； gt；lt；/divgt； lt；/divgt； lt；/divgt； lt；/divgt；lt；/divgt；lt；div class=quot；modal fadequot； id=qu
ot；modal-uploadquot； tabindex=quot；-1quot； role=quot；dialogquot； aria-hidden=quot；truequot；gt； lt；div class=quot；modal-dialog modal-dialog-centeredquot； role=quot；documentquot；gt； lt；div class=quot；modal-contentquot；gt； lt；div class=quot；modal-headerquot；gt； lt；h4 class=quot；modal-titlequot；gt； 上传文件 lt；/h4gt； lt；button type=quot；buttonquot； class=quot；closequot； data-dismiss=quot；modalquot； aria-label=quot；Closequot；gt； lt；span aria-hidden=quot；truequot；gt；lt；i class=quot；fal fa-timesquot；gt；lt；/igt；lt；/spangt； lt；/buttongt； lt；/divgt； lt；div class=quot；modal-bodyquot；gt； lt；div id=quot；filesDropzonequot；gt；lt；/divgt； lt；/divgt； lt；/divgt； lt；/divgt；lt；/divgt；登录后复制
CSS：.field { margin： 50px；}登录后复制
依赖：
确保引入以下依赖：lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt；lt；链接rel=quot；stylesheetquot；href=quot；https：//cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.cssquot；完整性=quot；sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc Wr78 5Xg==quot；crossorigin=quot；anonymousquot；referrerpolicy=quot；no-referrerquot；/gt；lt；link href=quot；http://cdnjs.cloudflare.com/ajax/libs/f
ont-awesome/4.3.0/css/font-awesome.cssquot； rel=quot；stylesheetquot； type='text/css'gt；lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.jsquot； integrity=quot；sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6 n2r4w==quot； crossorigin=quot；anonymousquot； referrerpolicy=quot；no-referrerquot；gt；lt；/scriptgt；lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.jsquot；integrity=quot；sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==quot；crossorigin=quot；anonymousquot；referrerpolicy=quot；no-referrerquot；gt；lt；/scriptgt；登录后复制汇总
通过将事件绑定到 click 事件，并使用 jQuery 的 DOM操作时，我们可以在模态窗口中打开获取到触发按钮之前关联的 data-action_url 属性。这使得我们能够在初始化 Dropzone 实例时，使用正确的 URL，从而实现正确的文件上传功能。这种方法保证了代码的可靠性和可维护性，同时也避免了由于事件触发时机问题而导致的数据获取错误。
以上就是获取模态窗口关联数据的正确方法：JavaScript事件处理详细解的详细，更多请关注乐哥常识网其他相关！ 相关标签： css javascript java jquery html js bootstrap ajax cdn red JavaScript jquery css bootstrap html class JS 对象 事件 dom 这个 大家都在看：可切换播放/暂停的音乐按钮：HTML， CSS， JavaScript 教程创建音乐播放/暂停按钮：JavaScript、HTML和CSS实现指南创建音乐播放/暂停按钮：基于HTML、CSS和JavaScript的实现教程基于Canvas仪表的文本揭示效果：CSS意图与定位的运用利用Canvas仪表与CSS实现动态文本显示效果