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

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

本文将深入探讨在使用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);

代码解释：

1. 事件绑定修改： this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this)); 将事件绑定到所有class为 .btnUpload 的元素的 click 事件上。
2. 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 结构：

  

      Photos
      

          

      
      

          
               Upload
          
          

      
  



  

      Photos
      

          

      
      

          
               Upload
          
          

      
  



  

      Photos
      

          

      
      

          
               Upload
          
          

      
  



    

        

            

                

                    Upload files
                
                
                    
                
            
            

                

            
        
    

CSS:

.field {
  margin: 50px;
}

依赖:

确保引入以下依赖：

总结

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

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