dynamically created a file upload and append it to div element but not working?

Question

I have created dynamically file upload element and append to div content. it's created. but events not working. I thing DOM not updated. if i press upload button i got alert message. if i click 2nd upload button (dynamically created) i did not get alert message.

My code :

<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 :

<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

Please use event delegation on the dynamically appended elements.

Try,

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

[Note : Your question could be one of the asked 12837th questions of the same kind in SO]

dynamically created a file upload and append it to div element but not working?

Question

1 answers

solution1
1 ACCPTED 2014-01-28 07:15:55

dynamically created a file upload and append it to div element but not working?

Question

1 answers

solution1 1 ACCPTED 2014-01-28 07:15:55

solution1
1 ACCPTED 2014-01-28 07:15:55