Как можно поставить обработчик событие на клик у сформированного js html?

Question

[Руслан Абсалямов]

Как можно обратиться к элементу класса, который был сформированный js. Как я понимаю, в момент инициализации html его еще не было. Поэтому у меня возникает вопрос как это примерно сделать?

class FileUpload {
    ...
    public removeButton: any = document.getElementsByClassName('remove-file');
...
    handleFileSelect(event) {
        const files = event.target.files;
        for(let i = 0; i < files.length; i++) {
            const file = files[i];
            ...
            if(fileType.type === 'image') {
                const reader = new FileReader();
                reader.onload = (e: any) => {
                    let div: any = document.createElement('div');
                    div.setAttribute('class', 'preview-file');
                    div.innerHTML = [`<i class="material-icons remove-file" id="${count}">close</i>
<img class="preview" title="${file.name}" src="${e.target.result}" width="100px" height="100px"/>
<div>${file.name}</div>`].join('');
                    document.getElementById('preview-content').insertBefore(div, null);
                };
                reader.readAsDataURL(files[i]);
            } else {
                let div = document.createElement('div');
                div.setAttribute('class', 'preview-file');
                div.innerHTML = [`<i class="material-icons remove-file" id="${count}">close</i>
<img class="preview" title="${file.name}" src="${fileType.icon}" width="100px"/>
<div>${file.name}</div>`].join('');
                document.getElementById('preview-content').insertBefore(div, null);
            }
        }
    }
    remove(): void {
        this.removeButton.onclick = () => {
            console.log(this.input.files);
        }
    }
}

И полностью код

Comments

[Ярослав Иванов]

Выучили классы, ES6 но банально не знаем как обратится к динамически созданному элементу? Просто смешно.

Answer 1

[Руслан Абсалямов]

class FileUpload {
    public input: any = document.getElementById('upload-input');
 ....
    handleFileSelect(event) {
        const files = event.target.files;
        for(let i = 0; i < files.length; i++) {
            const file = files[i];
            let type = file.type;
            Store.files.push(file);
            const fileType: FileType = FileUpload.determineFileType(type);
            let count: number = Store.files.length - 1;
            if(fileType.type === 'image') {
                const reader = new FileReader();
                reader.onload = (e: any) => {
                    let div: any = document.createElement('div');
                    div.setAttribute('class', 'preview-file');
                    div.innerHTML = [`<i class="material-icons remove-file" id="${count}">close</i>
<img class="preview" title="${file.name}" src="${e.target.result}" width="100px" height="100px"/>
<div>${file.name}</div>`].join('');
                    document.getElementById('preview-content').insertBefore(div, null);
                    FileUpload.removeFile(count);
                };
                reader.readAsDataURL(files[i]);
            } else {
                let div = document.createElement('div');
                div.setAttribute('class', 'preview-file');
                div.innerHTML = [`<i class="material-icons remove-file" id="${count}">close</i>
<img class="preview" title="${file.name}" src="${fileType.icon}" width="100px"/>
<div>${file.name}</div>`].join('');
                document.getElementById('preview-content').insertBefore(div, null);
                FileUpload.removeFile(count);
            }
        }
    }
    static removeFile(count): void {
        const removeButton: any = document.getElementById(`${count}`);
        removeButton.onclick = () => {
            console.log("hello");
        }
    }
}

new FileUpload();