Question

我已创建动态文件上传元素并附加到div内容。它被创造了。但事件不起作用。我的DOM没有更新。如果我按上传按钮我收到了提示信息。如果我点击第二个上传按钮（动态创建）我没有得到警报消息。

我的代码：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><form id="form1" runat="server"><body>
 <div id="uploaddev">
    <input class="Clsfileupload" id="Attachement1" name="Attachement1" type="file" value="">
    <span id="ErrorId1"></span>
</div>

脚本：

<script>
var totalfile = 1;
var ObjectNames = "";
var FilesNames = '';
var currentid = '';
$(".Clsfileupload").click(function(e) {
    currentid = this.id;
    alert(currentid);
});
$("#uploaddev").change(
  function() {

      var objectName = currentid;
      var ErrorId = currentid.replace("Attachement", "ErrorId");
      var size = document.getElementById(objectName).files[0].size;
      var Name = document.getElementById(objectName).files[0].name;
      if ((Name.indexOf(".png") > 0) || (Name.indexOf(".jpg") > 0)) {
          if (size > 102400000) {
              $("#" + ErrorId).text("file size too large");
          }

          else if (ObjectNames.indexOf(objectName) < 0) {
              ObjectNames = ObjectNames + objectName;
              totalfile = totalfile + 1;
              $("#uploaddev").append("<br><input class='Clsfileupload' id='Attachement" + totalfile + "' name='Attachement" + totalfile + "' type='file' value=''><span id='ErrorId" + totalfile + "'></span>");

          }
      }
      else {
          $("#" + ErrorId).text("Invalid file name");
      }
  });

Answer 1

请在动态添加的元素上使用event delegation。

尝试，

$(document).on('click','.Clsfileupload',function(e) {
    currentid = this.id;
    alert(currentid);
});

[注意：您的问题可能是SO中所提出的12837个同类问题之一]

动态创建文件上传并将其附加到div元素但不起作用？

1 个答案: