Не активирует ли jQuery событие нападающего при отключенной кнопке?

Я реализую форму, в которой я хочу отключить button и показать всплывающую подсказку, объясняющую, почему она отключена при зависании. Однако, когда параметр button отключен, всплывающая подсказка не отображается.

Я добавил здесь тестовый пример, воспроизводя с помощью только jQuery: http://jsfiddle.net/BYeFJ/1/

Кажется, что jQuery не запускает событие или браузер не запускает событие hover?

Я использую Модуль подсказок Bootstrap Twitter и, конечно же, jQuery.

NB: Я также пробовал это с оберткой вокруг кнопки, но он проглатывает состояние зависания, и я также попытался использовать элемент input, чтобы тот же эффект.

Ответы

Ответ 1

Вы можете поместить прозрачную надпись над кнопкой и поместить туда всплывающую подсказку.

http://jsfiddle.net/yL2wN/

<div id="wrapper">
    <div id="overlay"></div>                
    <button disabled>BUTTON</button>
</div>

#wrapper{
    position: relative;   
}
#overlay{
    position: absolute;        
    top: 0;
    left: 0;

    opacity: .1;
    height: 20px;
    width: 70px;
}

В скрипке я установил синий цвет, чтобы вы могли видеть, что происходит. Ширина и высота наложения могут быть отрегулированы по мере необходимости или сделаны динамическими в js.

Ответ 2

Одним из возможных решений является только его готовность:

<button id="disabledbutton" readonly="readonly">Disabled Button</button>

Затем измените css, чтобы выглядеть отключенным и переопределить onclick, чтобы предотвратить любое действие:

$('#disabledbutton').click(function() { return false; } );

Ответ 3

Добавьте классы "ui-button-disabled" и "ui-state-disabled", чтобы они выглядели как отключенная кнопка и проверяли их в функции щелчка, чтобы определить состояние. Удалите их, когда вам нужен разрешенный вид.

Ответ 4

Это может помочь

<style>
 .btn{
   padding: 0 !important; // or get padding size of .btn
 }

 .button{
  padding: 8px 30px 6px;
 }
</style>

<body>
 <button type="submit" id="submit_form" class="btn" disabled/>
  <div class="button">Submit</div>
 </button>

 <script>
  $('.button').hover(function (){
    // place code here
  });
 </script>
</body>

Ответ 5

Следуйте руководству Джеймса, я пробовал вот так

<div id="wrapper">
<button id='overlay'>BUTTON</button>
<button disabled>BUTTON</button></div>

#overlay{
position: absolute;
opacity: 0;}

Я помещаю поддельную кнопку с тем же текстом перед старым и устанавливаем идентификатор. В css я установил положение, чтобы эта новая кнопка стала относительной с оболочкой, так что эта новая кнопка будет помещена в одно и то же пространство с отключенной кнопкой.

Вот моя скрипка: http://jsfiddle.net/p2j041Ln/