如何在元素属性更改上使用JQuery事件委托？

编程问答 2022-08-11

问题描述

我有一个带有按钮的表格，用于编辑现有记录。单击按钮后，将打开一个模态更新记录，包括一个删除记录中附加的现有文件的按钮，单击该按钮会触发对delete_file PHP脚本的Ajax调用。如果存在文件，则在'p'元素中预览其文件名。

我遇到的问题是，如果用户编辑的记录中不包含文件，则上传文件，然后在不保存记录的情况下将其删除，我现有的代码将无法删除该文件。这是因为在文件上传时会动态生成HTML，以将文件url放置在按钮属性中，该属性不能传递给文件删除。

经过研究，我认为解决方案是事件委托。我尝试了一些建议，但都没有奏效。我该怎么办：

  1. 添加一个文件（文件名在“ $（“ button””）中。attr（“ data-fileurl”）//起作用
  2. 单击“删除文件”按钮后，将$（“ button”）。attr（“ data-fileurl”）存储在变量中
  3. 将url变量传递给delete_file函数

HTML：

<div id='file_upload' class='file-upload'>
  <input type='file' id='file_input' style='opacity:0;' />
  <p class='file_upload_text'>Click to upload file</p>
</div>
<div id='file_upload_preview' class='file-upload file-preview' style='display:none;'>
  <div class='file_preview'></div>
  <button id='fileurl' data-fileurl='' class='file_delete'>Delete</button>
</div>

jQuery：

jQuery(document).ready(function($) {
  var filesToUpload = [];
  var fileUrlDelegated = ""; 
  $('#file_input').on('change',function(e) {
    var files = e.target.files[0];
    filesToUpload.push(files);
    prepareUpload(filesToUpload);  
  $(".file_delete").on('click',function(e) {
    e.preventDefault();
    $(document.body).on('change',"button [data-fileurl]",function (event) { // not working
      fileUrlDelegated = $(event.target).attr("data-fileurl");
    });
    delete_file(fileUrlDelegated);
  });
});
      
function prepareUpload(file) { // upload file; dynamic HTML generated after an ajax call; this works
  var parent = $("#file_input").parent();
  var previewID = parent.attr("id") + "_preview";
  var previewParent = $("#"+previewID);
  previewParent.show();
  previewParent.children(".file_preview").empty().append( preview );
  previewParent.children( "button" ).attr("data-fileurl",data.url );
  parent.children("input").val("");
  parent.hide();
}
    
function delete_file (file_url) {  // works as long as url is provided
  $(".file_preview").text("");
  $("button").attr("data-fileurl","");
  $("#file_upload_preview").hide();
  $("#file_upload").show();
  var data = new FormData();
  data.append("fileurl",file_url);
  $.ajax({
    url: general_globals.ajaxurl,type: 'POST',data: data,processData: false,contentType: false,cache: false,dataType: 'json'
  });
}

解决方法

您只需要重写逻辑即可，code的其余部分看起来很不错。到delete文件并通过data-fileurl-您可以简单地检查是否存在由准备上载生成的文件URL。

此外，要获取数据属性，我们可以简单地使用.data方法并在.data('fileurl')中写入jQuery来获取按钮fileurl，然后将其传递给我们的删除{ {1}}，以便function被调用。{p>

要获得正确 ajax，我们可以在删除功能中使用backend，该功能引用我们单击的元素，fileURL >

出于安全考虑，我们将使用$(this)，因为HTML是动态创建的。

将您的删除文件功能替换为此：（在localhost上测试过的代码可以正常工作）

.file_delete
,

尝试使用FileReader API，而不要依赖AJAX调用。您可以制作类似

的方法 
function readURL() {
  var input = grab your input here;
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#preview').attr('src',e.target.result);
     }
     reader.readAsDataURL(input.files[0]);
   }
};

这样，在用户保存记录之前，您无需触摸数据库，这样就可以解决您的问题。

ajaxevent-delegationjquery