javascript - Jquery call back not firing in bootstrap tab -

i can't seem callback fire unless paste code console. if that, works. seems kind of scoping issue or because of dynamic nature of bootstrap tabs.

html

<input type="file" class="fileelem pull-right" id="logoupload" multiple onchange="handlefiles(this.files)"> <ul id="files"></ul> <span class="fileselect pull-right" id="logoselectupload"> choose file</span> 

jq

//turn bootstrap tab on elements ready  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {             function click(el) {                     // simulate click on element.                     var evt = document.createevent('event');                     evt.initevent('click', true, true);                     el.dispatchevent(evt);             }             document.queryselector('#logoselectupload').addeventlistener('click', function(e) {                     var fileinput = document.queryselector('#logoupload');                     //click(fileinput); // simulate click custom event.                     fileinput.click(); // or, use native click() of file input.             }, false);              //callback work if paste console              function handlefiles(files) {                     //call backs                     var list = [].slice.call(files).map(function(file) {                             return '<li>' + file.name + '</li>';                     }).join('');                      document.getelementbyid('files').innerhtml = list;             }  }); 

your callback function scoped inside event handler. try:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {             function click(el) {                     // simulate click on element.                     var evt = document.createevent('event');                     evt.initevent('click', true, true);                     el.dispatchevent(evt);             }             document.queryselector('#logoselectupload').addeventlistener('click', function(e) {                     var fileinput = document.queryselector('#logoupload');                     //click(fileinput); // simulate click custom event.                     fileinput.click(); // or, use native click() of file input.             }, false);              //callback work if paste console  });  function handlefiles(files) {      //call backs      var list = [].slice.call(files).map(function(file) {            return '<li>' + file.name + '</li>';       }).join('');        document.getelementbyid('files').innerhtml = list; }