Question

我通过以下代码重写文件输入：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

如何对动态创建的元素使用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);
    }
}());

JavaScript我必须使用JS click函数，而不是jQuery

1 个答案: