JavaScript I must use JS click function, not jQuery

Question

I rewrite file input by code on: http://jsfiddle.net/b9rtk/ but when we click at dynamic button 'Add one more file' the JavaScript click() (line 13) doesn't work.

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

$('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);
});

Why don't you want to use jQuery? You're using it for everything else... — CodingIntrigue, Sep 13 '13 at 12:10
In this example on('click') doesn't work, I don't know why!? — kicaj, Sep 13 '13 at 12:17
You should post a question asking why your `click` doesn't work, rather than how to do it outside of jQuery — CodingIntrigue, Sep 13 '13 at 12:17
Have a look at this: http://stackoverflow.com/questions/793014/jquery-trigger-file-input Reason you can't trigger click is because the input is hidden. — sunn0, Sep 13 '13 at 12:19
Problem is I must use JavaScript function click() for creating dynamic elements, but JS click function working only with static elements — kicaj, Sep 13 '13 at 12:38

Paul S. · Answer 1 · 2013-09-13T12:26:44.730

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

I've re-written it in VanillaJS. Not the only way to re-write it, I'm sure.

(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 I must use JS click function, not jQuery

1 Answers1