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; }
Comments
Post a Comment