Question

我使用来自Bootstrap的＆＃39;数据切换＆＃39; -option作为按钮。在按钮我有一个glypicons和sometext。但是，当您单击它可以使用的文本时，但是当您单击该glyphicon时，它不会触发数据切换。由于数据切换在JSFiddle中不起作用，我无法发布链接。

HTML：

vm.gridReference = $('div[kendo-grid]').data('kendoGrid');

JavaScript的：

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

我已经在线查看过但未找到解决方案或遇到同样问题的人。

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

View Fiddle

Bootstrap数据切换=＆＃34;按钮＆＃34;不使用<span>

1 个答案: