How do I trigger click event on dynamically created input type 'file'?

Question

I am attempting to add an input of type 'file' to a form dynamically. Actually the end user can add as many files as they would like to a form, so an array concept is needed. I can inject dynamic elements, but I can't figure out how to dynamically invoke the click of the input element just injected. Also, need to remove the dynamic element if the user chooses cancel on the input element.

I have created a jsfiddle showing the injection but the click event never fires when the trigger is run.

How do I trigger the 'click' event after injecting this element?

jsFiddle Html

<input id='button1' type='button' value='button1'>
<div class='container'>

</div>

jsFiddle JavaScript

$(document).ready(function () {
    $('#button1').on('click', function(event) {
    Button1_Click(event);
  });
});

function Button1_Click(event) {
    var container = $('.container');
  var containerChildren = $(container).children();
  var containerChildrenCount = $(containerChildren).length;
  var inputId = 'fileInput[' + containerChildrenCount + ']';
    $('.container').append('<input id="' + inputId + '" type="file" />');
  $('#' + inputId).trigger('click');
}

user1494917 · Accepted Answer · 2018-03-15 03:21:39Z

1

Try removing the [] from the inputId variable.

I got it to work in your fiddle by changing it to this

var inputId = 'fileInput-' + containerChildrenCount

answered Mar 15, 2018 at 3:21

user1494917

903 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

barrypicker Over a year ago

This works. Not sure why the brackets caused a problem - good find. Any idea how to detect when a user selects cancel in the Open File dialog box?

user1494917 Over a year ago

Sorry, not sure how to detect change in the dialog box. I think the original problem came from allowed chars - quite simple but easy to miss :) Checkout this link: xahlee.info/js/html_allowed_chars_in_attribute.html

Collectives™ on Stack Overflow

How do I trigger click event on dynamically created input type 'file'?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related