JavaScript detect change on appended file input

Question

I generated a form when a user presses a button with this code:

var sql = "SELECT * FROM categories WHERE ID = " + id;
    var result = db.query(sql, {json:true});
    var obj = JSON.parse(result);
    var parsedlength = arrLenght(obj);

    var main = document.getElementById('main');
    var modal = document.createElement('div');

    for(var i = 0; i < parsedlength; i++) {
        var object = obj[i];
        for (var key in object) {
            if(object.hasOwnProperty(key)) {
                modal.className = 'modal fade bd-example-modal-lg';
                modal.id = "editModal";
                modal.role = "dialog";
                modal.innerHTML = '<div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">'+
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close"  onclick="deleteElement(\'editModal\')">'+
                            '<span aria-hidden="true">&times;</span>'+
                        '</button>'+
                        '<h4 class="modal-title">Bewerken van categorie: ' + object['ConName'] + '</h4>'+
                    '</div>'+
                    '<div class="modal-body" style="background-image: url(\'' + object['img'] + '\')">'+
                    '<div class="row">'+
                    '<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Naam:</label>'+
                        '<div class="col-md-12 col-xs-12">'+

                            '<input class="form-control" type="text" value="' + object['ConName'] + '" placeholder="Categorie" id="cat-name" name="cat-name">'+
                        '</div>'+
                        '<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Afbeelding:</label>'+
                        '<div class="col-md-9 col-xs-12">'+
                            '<input type="text" name="cat-path-show" id="cat-path-show" class="form-control" placeholder="afbeelding" readonly>'+
                            '<input type="file" name="cat_path_update" id="cat-path-update" style="position: absolute; top:-10000px;">'+
                        '</div>'+
                        '<div class="col-md-3 col-xs-12"><button id="update-cat-img" class="btn btn-info" onclick="updateList()">afbeelding kiezen</button></div>'+
                    '</div>'+
                    '</div>'+
                    '<div class="modal-footer">'+
                        '<div class="btn-group">'+
                            '<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteElement(\'editModal\')">Annuleer</button>'+
                            '<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCatEdit();deleteElement(\'editModal\')">Opslaan</button></div>'+
                        '</div>'+
                    '</div>'+
                '</div>';
            }
        }
        window.setTimeout(function() {
            main.appendChild(modal);
            $('#editModal').modal('show')
        }, 100);
        object = null;
        var obj = null;

as you can see, there is a button called "afbeelding kiezen", with an ID of "update-cat-img" that triggers the function updateList() this function clicks on the file input. the problem is detecting the change event, because the form is appended after the entire page is loaded, I can't add an addEventListener, listening for the file input value to change.

this is what I've tried, but ofcourse, it doesn't work. how would I be able to change the value of fileView to the value of file when the value of file is changed?

function updateList() {
    var file = document.getElementById('cat-path-update');
    var fileView = document.getElementById('cat-path-show');
    file.click();
    file.addEventListener('change', function() {
        m();
        fileView.value = file.value;
    }, false);
    m(file.value);

}

Answer 1

Be sure to add the change event before the call. Here is an example:

//HTML-Template
var tHTML = (function(){/*
    <div>
        <div><span id = 'sName'>-</span></div>
        <div><input id = 'inFile' name = 'inFile' type = 'file' /></div>
    </div>
*/}).toString().split('/*').pop().split('*/')[0].trim();

//Append HTML
document.body.innerHTML += tHTML;

//Add change event
var tF = document.querySelector('#inFile');
tF.onchange = function(){
    if(this.files && this.files.length){
        var tS = document.querySelector('#sName');
        tS.textContent = this.files[0].name
    }
};

//Execute
tF.click();