javascript - JavaScript jQueryではなく、JSクリック機能を使用する必要があります

Question

http://jsfiddle.net/b9rtk/のコードでファイル入力を書き換えますが、動的ボタン「ファイルをもう 1 つ追加」をクリックすると、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);
    }
}());