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

Question

我有一个带有按钮的表单来编辑现有记录。单击按钮时，将打开一个模式以更新记录，包括一个用于删除附加到记录的现有文件的按钮，单击该按钮会触发对 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'
  });
}

Answer 1

您只需要重写您的逻辑，code 的其余部分就可以很好地了解它在做什么。到 delete 文件并传递 data-fileurl - 您可以简单地检查文件 URL 是否存在，这是由准备上传生成的。

此外，要获取数据属性，我们可以简单地使用.data 方法并在jQuery 中写入.data('fileurl') 以获取按钮fileurl，然后将其传递给我们的删除function 以获取ajax请致电backend。

要获得正确 fileURL，我们可以在删除函数中使用$(this)，它指的是我们点击的元素.file_delete

为了安全起见，我们将在您的情况下使用event Delegation，因为 HTML 是动态创建的。

将您的删除文件功能替换为：（在 localhost 上测试并运行的代码）

//Delete file
$(document).on('click', '.file_delete', function(e) {
  e.preventDefault();
  //Get the file URL
  var fileURL = $(this).data('fileurl')
  //Check if file URL exist - then call delete else do not anything
  if (fileURL != '') {
    //Call delete function
    delete_file(fileURL);
  } else {
    return false
  }
});

Answer 2

尝试使用 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]);
   }
};

这样，在用户保存记录之前，您不会接触数据库，这样您的问题就解决了。