jquery - Add onClick to an input being built by JavaScript -

jquery - Add onClick to an input being built by JavaScript -

i have file type input button needing clear if user chooses , safe solution have found destroy input , rebuild it. have right works "harp gun" solution in works once.

basically, user has file input so:

<input type="file" name="filestoupload" id="filestoupload" onchange="makefilelist();" /> <ul id="filelist"><li>no files selected</li></ul>

and when select file, may need clear completely.

so have beingness built via appending on filelist:

function makefilelist() { var input = document.getelementbyid("filestoupload"); var ul = document.getelementbyid("filelist"); while (ul.haschildnodes()) { ul.removechild(ul.firstchild); } (var = 0; < input.files.length; i++) { var li = document.createelement("li"); var filesize = input.files[i].size; li.innerhtml = input.files[i].name +"&nbsp;"+ "<span id=\"lblsize\"></span><input onclick=\"clearfileinput()\" type=\"button\" value=\"clear\" \/>"; ul.appendchild(li); } if(!ul.haschildnodes()) { var li = document.createelement("li"); li.innerhtml = 'no files selected'; ul.appendchild(li); } };

and destroy file, function rebuilds input so:

function clearfileinput(){ var oldinput = document.getelementbyid("filestoupload"); var newinput = document.createelement("input"); newinput.type = "file"; newinput.id = oldinput.id; newinput.name = oldinput.name; newinput.classname = oldinput.classname; newinput.style.csstext = oldinput.style.csstext; // re-create other relevant attributes oldinput.parentnode.replacechild(newinput, oldinput); };

so can create element, add together file type, , utilize old input id, class , name. need have same onchange="makefilelist(); behavior well.

here fiddle. help appreciated.

simply add together attribute.

function clearfileinput(){ var oldinput = document.getelementbyid("filestoupload"); var newinput = document.createelement("input"); newinput.type = "file"; newinput.id = oldinput.id; newinput.name = oldinput.name; newinput.classname = oldinput.classname; newinput.style.csstext = oldinput.style.csstext; newinput.setattribute("onclick", "makefilelist()"); // re-create other relevant attributes oldinput.parentnode.replacechild(newinput, oldinput); };

javascript jquery file-io