引导数据切换= "button"不起作用<span>

Question

我正在使用bootstrap的'data-toggle'-option作为按钮。在按钮中，我有一个与Glypicons和Wayerext一起使用的。但是，当您单击文本时，它可以工作，但是当您单击Glyphicon时，它不会触发数据模糊。由于data-toggle在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();
    }
}

我已经在线查看，但没有找到解决方案或某人有相同的问题。

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

查看小提琴