Bootstrap data-toggle="button" 不适用于 <span>

Question

我正在使用 Bootstrap 中的 'data-toggle' 选项作为按钮。在按钮中，我有一个带有 glypicons 和一些文本的按钮。但是，当您单击文本时它会起作用，但是当您单击字形图标时它不会触发数据切换。由于数据切换在 JSFiddle 中不起作用，我不能 post a link 它。

HTML:

<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>

JavaScript:

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        document.getElementById("showHide").blur();
    }
}

我在网上看过，但没有找到解决方案或遇到相同问题的人。

Answer 1

似乎在传播切换事件之前替换了 span。您可以使用 button 方法来激活切换而不是数据属性。

<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    }
}

View Fiddle

Bootstrap data-toggle="button" 不适用于 <span>

Bootstrap data-toggle="button" not working with <span>

html

javascript

button

twitter-bootstrap