动态加载时按钮不响应

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

});

});