Jquery 带工具提示的禁用引导3按钮上的KnockoutJS事件绑定

我需要在按钮上显示一个动态引导工具提示，解释为什么按钮被禁用（即“填写您的姓名/地址/电话”或其他变体）。我在项目中使用Bootstrap/jQuery/KnockoutJS

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

我使用KnockoutJS和click绑定来处理按钮事件

问题：当按钮被启用且包含特定CSS类（即，

btn disabled

）时，是否有人知道一种干净/简洁的方法来禁用按钮单击事件，以便不调用KnockoutJS单击事件，但工具提示仍然显示

非工作代码示例：

<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>

<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>

请注意，使用

enable:false

数据绑定属性时，工具提示将不会显示。我试图用样式/事件处理重新创建行为，但没有真正禁用控件：

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>

<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>

测试按钮

脚本：

<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>

<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>

函数TestViewModel（）{
var self=这个；
self.clickTest=函数（）{
调试（“已单击测试按钮”）；
};
}
var testViewModel=新的testViewModel（）；
$（文档）.ready（函数（）{
$（'#testButton'）。工具提示（）；
控制台调试（“文件准备就绪”）；
应用绑定（testViewModel）；
});

这可能不是最干净的方式，但如果按钮在ViewModel中表示，则其状态也可以在ViewModel中表示：

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

或者，您也可以选择button元素，并在开始时给它一个类，如

showTooltip

。每当按钮被禁用时，您可以将其类切换为类似于

dontShowTooltip

，并且可以检查它在

self.clickTest（）中的类

这不会禁用按钮单击事件，但您可能不必禁用。
您是否忽略了文档的这一部分

要将工具提示添加到禁用的
或
.disabled
元素，请将该元素放在
中，并将工具提示应用到该
元素

你在寻找类似这样的东西——不完全是，这一定是一个bootstrap 3工具提示：我可以用小提琴来测试你的问题吗？哇，就在我内联发布代码的时候，我看到了你的小提琴注释；）我们需要写一些hack，可能是因为我们在这里使用bootstrap来获取工具提示，实际上禁用那些没有触发的事件（如前面提到的）。纯html在这种情况下没有问题。我唯一的问题是，我所有的点击处理程序都需要查看视图模型，以确定按钮是否“已启用”，如果是-执行一些操作，则不执行。我正在想办法避免这种情况。不过谢谢你，你上面提到的路线实际上是我的退路计划。我知道你在说什么——这感觉不是一个干净的解决方案。但是，此方法可能与一致，因为客户端ViewModel将描述视图上按钮/工具提示的功能。如果你不想走那条路。我希望这能有所帮助，请恕我直言。我是初学者！哈，当我出于某种原因回答这个问题时，它让我思考——等一下，当我在div上尝试工具提示时，我是否记得调用$（“…”）.tooltip（）；在div上，不，我没有。哎呀！事实上，这确实解决了问题。谢谢