带有工具提示的禁用 Bootstrap 3 按钮上的 KnockoutJS 事件绑定

Question

我需要在按钮上显示动态 Bootstrap 工具提示，说明该按钮被禁用的原因（即“填写您的姓名/地址/电话”或某些变体）。我正在为项目使用 Bootstrap/jQuery/KnockoutJS。

我在禁用按钮上显示引导工具提示时遇到问题，通过谷歌搜索发现这是由于没有触发底层按钮事件（由于按钮被禁用，引导工具提示不起作用. 哦！）。

我正在使用带有点击绑定的 KnockoutJS 来处理按钮事件。

问题：有谁知道在启用按钮并且包含特定CSS类（即btn-disabled ) - 这样不会调用 KnockoutJS 点击事件，但工具提示仍然显示？

无效代码示例：

请注意，使用enable:false data-bind 属性，工具提示将不会显示。我试图通过样式/事件处理重新创建行为，但并没有真正禁用控件：

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>

...

    <button id="testButton"
            class="btn btn-default"
            data-bind="click: clickTest, enable:false"
            data-toggle="tooltip"
            data-placement="left"
            data-original-title="Test tool tip">
        Test Button
    </button>

脚本：

<script type="text/javascript">

    function TestViewModel() {
        var self = this;        
        self.clickTest = function () {
            console.debug("Test button has been clicked");
        };
    }

    var testViewModel = new TestViewModel();

    $(document).ready(function () {
        $('#testButton').tooltip();
        console.debug("document ready");
        ko.applyBindings(testViewModel);        
    });

</script>

Answer 1

您是否忽略了文档的这一部分？：

Tooltips on disabled elements require wrapper elements

要将工具提示添加到disabled 或.disabled 元素，请将元素放在<div> 内，然后将工具提示应用于该<div>。

Answer 2

这可能不是最简洁的方式，但如果您的按钮在 ViewModel 中表示，它的状态也可以在 ViewModel 中表示：

var self = this;
var buttonIsDisabled = ko.observable('true');
self.clickTest = function() {
     if (self.isDisabled()) {
         $('#testButton').tooltip('show')
     }
}

或者，也许您可​​以使用按钮元素并最初给它一个像showTooltip 这样的类。每当按钮被禁用时，您都可以将其类切换为dontShowTooltip 之类的东西，并且您可以检查它在self.clickTest() 中具有哪个类。

这不会禁用按钮单击事件，但您可能不必这样做。