將按鈕轉換為跨度。 為什么我的代碼不能與javascript一起使用？

Question

我正在使用數據表按鈕，我需要一種使用這些按鈕上傳文件的方法

這個Javascript

 buttons: [
        {
            text: '<label for="fileUpload" class="btn btn-secondary-outline"><span class="fa fa-upload"></span> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"/>',
            className: 'import-btn',
            action: function () {

            }
        }
]
$('.import-btn').removeClass();

產生

 .hide { display: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <button class="" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></button> 

我可以上傳，但是如果我生成的代碼行上方沒有任何內容...

還有一種方法可以將<button class="" tabindex="0" aria-controls="dataTable">更改為<span class="" tabindex="0" aria-controls="dataTable">

Answer 1

跨度是內聯元素，很難單擊。 如果添加

顯示：內聯塊

（甚至阻止），您應該沒問題。 這是一個工作片段。

 .hide { display: none; } .spanButton {display: inline-block;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <span class="spanButton" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></span>