Jquery回调在bootstrap选项卡中没有触发

Jquery call back not firing in bootstrap tab

本文关键字：回调 bootstrap 选项 Jquery 更新时间：2023-09-26

除非我将代码粘贴到控制台中，否则我似乎无法让我的回调触发。如果我这样做，它就会起作用。似乎是某种范围问题或其他东西，因为引导选项卡的动态性质。

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>

金桥

//turn the bootstrap tab on so elements are ready
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            function click(el) {
                    // Simulate click on the 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 the click with a custom event.
                    fileInput.click(); // Or, use the native click() of the file input.
            }, false);
            //callback will only work if I paste it into the 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;
            }
});

回调函数的作用域在事件处理程序中。试一试:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            function click(el) {
                    // Simulate click on the 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 the click with a custom event.
                    fileInput.click(); // Or, use the native click() of the file input.
            }, false);
            //callback will only work if I paste it into the 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;
}