KnockoutJS привязка событий к отключенной кнопке Bootstrap 3 с подсказкой

Question

Мне нужно показать динамическую подсказку Bootstrap на кнопке, которая объясняет, почему кнопка отключена (например, «Заполните свое имя/адрес/телефон» или какой-либо вариант). Я использую Bootstrap/jQuery/KnockoutJS для проекта.

У меня возникли проблемы с отображением всплывающей подсказки Bootstrap на отключенной кнопке и обнаружены через какой-то Google, поскольку это связано с тем, что основные события кнопки не запускаются (поскольку кнопка отключена, всплывающая подсказка Bootstrap не Д'о!).

Я использую KnockoutJS с привязками кликов для обработки событий кнопок.

Issue: Кто-нибудь знает чистой/емким образом, чтобы отключить кнопку щелчка события, когда кнопка включена и содержит определенный класс CSS (т. Е btn-disabled) - так что KnockoutJS нажмите событие не вызывается , но всплывающая подсказка все же появляется?

Пример неработающего кода:

Обратите внимание, что с помощью атрибута 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> 

...

<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().

Это не отключит событие нажатия кнопки, но вам может и не понадобиться.