Question

我写了一个脚本来将文件上传到服务器。如果输入和标记永久性地是文档的一部分，则没有问题 - 一切正常，投入。当我使用.html（）函数加载要动态上载的表单时出现问题

然后上传停止工作。正如你所看到的，我是以$（document）.on（“click”，“element”）的方式来做的，但它没有给出多少。

我忘记了什么？我错过了什么吗？

$(".user-av").on("click", function(e) {

  $(".dialog-global").fadeIn("slow");
  $(".dialog-head").html("<p>Update avatar</p>");
  $(".dialog-content").html('<input type="file" class="set-av" /><a href="#" class="upload-av-btn orange-btn">Upload</a>');

  e.stopPropagation();

});

$(document).on("click", ".upload-av-btn", function(e) {

  var files = $(".set-av").prop("files")[0];
  var form = new FormData();
  form.append("file", files);

  $.ajax({
    url: "upload.php",
    dataType: "text",
    cache: false,
    contentType: false,
    processData: false,
    data: form,
    type: "post",
  }).done(function(response) {
    alert(response);
  });

  e.stopPropagation();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

试试这个脚本。

$(document).ready(function(){
$(".user-av").on("click", function(e) {

  $(".dialog-global").fadeIn("slow");
  $(".dialog-head").html("<p>Update avatar</p>");
  $(".dialog-content").html('<input type="file" class="set-av" /><a href="#" class="upload-av-btn orange-btn">Upload</a>');

  e.stopPropagation();

});

$(document).on("click", ".dialog-content .upload-av-btn", function(e) {
  e.preventDefault();
  var files = $(".set-av").prop("files")[0];
  var form = new FormData();
  form.append("file", files);

  $.ajax({
    url: "upload.php",
    dataType: "text",
    cache: false,
    contentType: false,
    processData: false,
    data: form,
    type: "post",
  }).done(function(response) {
    alert(response);
  });

});

});

动态加载时按钮不响应

1 个答案: