JavaScript 我必须使用JS点击功能，而不是jQuery

Question

这个问题已经有答案了:

Pure JavaScript equivalent of jQuery click()? (4 个回答)

已关闭 9 年前。

我通过代码重写文件输入:http://jsfiddle.net/b9rtk/但是当我们单击动态按钮“添加另一个文件”时，JavaScript click() (第 13 行)不起作用。

如何使用 JavaScript click()动态创建元素的方法(不是 jQuery)？

$('input[type=file]').on('change', function () {
    code = '<fieldset>' + $(this).parents('fieldset').html()
        .replace('Browse and select file', 'Add one more file') + '</fieldset>';
    $(this).parents('fieldset').after(code);
});

Answer 1

How to use JavaScript click() method (not jQuery) for dynamic created elements?

我已经用 VanillaJS 重写了它。我确信这不是重写它的唯一方法。

(function () {
    var inputs = document.getElementsByTagName('input'),
        fn = function () {
            var html = this.parentNode.innerHTML.replace(
                    'Browse and select file',
                    'Add one more file'
                ),
                d = document.createElement('div'),
                df = document.createDocumentFragment();
            html = '<fieldset>' + html + '</fieldset>';
            d.innerHTML = html;
            while (d.childNodes.length)
                df.appendChild(d.childNodes[0]);
            if (this.parentNode.parentNode.nextSibling) // <form> is 3 parents up
                this.parentNode.parentNode.parentNode.insertBefore(
                    df,
                    this.parentNode.parentNode.nextSibling
                );
            else
                this.parentNode.parentNode.parentNode.appendChild(df);
        },
        i = inputs.length;
    while (i--) {
        if (inputs[i].getAttribute('type').toLowerCase() === 'file')
            inputs[i].addEventListener('change', fn);
    }
}());