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

【问题标题】：Bootstrap data-toggle="button" not working with <span>Bootstrap data-toggle="button" 不适用于 <span>
【发布时间】：2015-05-05 15:07:16
【问题描述】：

我正在使用 Bootstrap 中的“数据切换”选项作为按钮。在按钮中，我有一个带有 glypicons 和 sometext 的按钮。但是，当您单击文本时，它可以工作，但是当您单击字形图标时，它不会触发数据切换。由于数据切换在 JSFiddle 中不起作用，我无法发布指向它的链接。

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();
    }
}

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

【问题讨论】：

似乎可以在这个 jsfiddle 中工作：jsfiddle.net/5qe31kw0/1 您能否发布一个指向您的代码的链接或在另一个 jsfiddle 中重新创建它？
@Brammz，我提供了一个 JSFiddle，看起来它提供了解决方案。你怎么看？这就是你所追求的吗？
@Brammz，我同意 Antfish 的观点，删除了解决方案，看来这已经在工作了
@Antfish，谢谢你的 JSFiddle，当我尝试它时，我无法让它工作，但是当你点击图标时，数据切换没有关闭
@Brammz “数据切换不关闭”是什么意思？如果您的意思是未删除该属性，那么您的代码中没有任何内容可以删除它。我刚刚设法删除了该属性，它仍然有效：jsfiddle.net/5qe31kw0/2 我想它是一个引导钩子。

标签： javascript html twitter-bootstrap button

【解决方案1】：

似乎在传播切换事件之前已替换跨度。您可以使用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

【讨论】：