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

我有一个带有按钮的表单，可以编辑现有记录。单击按钮时，将打开一个更新记录的模式，包括一个删除附加到记录的现有文件的按钮，单击该按钮将触发对delete_file PHP脚本的ajax调用。如果文件存在，则在“p”元素中预览其文件名

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

经过研究，我认为解决方案是事件委托。我试过几条建议，但没有一条奏效。我怎样才能：

添加一个文件（文件名在“$”（“button”）.attr（“数据文件URL”）//这样做有效

单击“删除文件”按钮后，将$（“按钮”）.attr（“数据文件URL”）存储在变量中

将url变量传递给delete_file函数

HTML:

---

尝试使用FileReaderAPI而不是依赖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]);
   }
};

---

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

您只需重写逻辑，其余的

代码就可以了。要
删除
文件并传递
数据文件URL
，您只需检查生成的文件URL是否存在d准备上传

此外，为了获得数据属性，我们可以简单地使用方法并在
jQuery
中写入
.data（'fileurl'）
以获取按钮
fileurl
，然后将其传递给我们的delete
函数
，以便
ajax
调用
后端

要获得正确的
文件URL
，我们可以在我们的删除函数中使用
$（this）
，该函数引用我们单击的元素，该元素将是
。file\u delete

为了安全起见，我们将在您的案例中使用
事件委托
，因为HTML是动态创建的

将删除文件功能替换为：（代码在本地主机上测试并正常工作）

感谢您的回复。我刚刚阅读了FileReader。我认为这不是解决我问题的正确方法。我的代码按预期上载文件，并将自定义url存储在“按钮数据文件url”中；例如，按钮数据文件url=”"。我的问题是，我需要这个准确的url来传递到delete_file函数。但是，该url在文档准备就绪时不存在，因为文件是在之后上载的，我不知道如何获取加载页面后动态生成的数据文件url。好的，在重新阅读您的答案后，我知道您将如何处理此问题。我不想这样做必须重新编写一堆已经运行的代码，但可能我只能在保存记录后重新安排代码以上载文件。您好，@AlwaysHelping！谢谢您的回答。我将继续工作并向您报告。成功了！再次感谢您的专业知识。我接受了您的回答，因为它解决了原始问题。然而，另一个问题是m。如果存在一个文件，然后被删除，然后附加另一个文件，fileURL保留了第一个删除文件的url，而不是第二个要删除的文件。这是一个边缘案例，我不会花时间解决，只是出于好奇，这不是事件委派应该处理的吗？此外，我确认了正确的url位于HTML中的“数据文件URL”。@GSimmons欢迎您乐于帮助。对于第二种情况，我的处理方法是在我的删除函数中清除delete buttons dataURL。此外，我建议使用按钮的类来分配-使用.Attr-添加新文件URL和删除旧文件URL:）如果我理解正确，我相信我已经在这样做了。在delete函数中，我使用$（“button”）.attr（“data fileurl”），它可以正常工作。在upload函数中，我使用previewParent.childrent（“button”）.attr（“data fileurl”，data.url）。这两个都可以正常工作。因此，当请求删除第二个文件时，请使用“data fileurl”“在HTML中，它不同于$（this）中的控制台日志文件URL，后者是第一个删除的文件。
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'
  });
}

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]);
   }
};

//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
  }
});