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

Question

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

如何click()对动态创建的元素使用 JavaScript 方法（不是 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

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

我用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);
    }
}());