¿jQuery no activa el evento de desplazamiento sobre un botón deshabilitado?

Estoy implementando un formulario, por el cual deseo desactivar un button y mostrar una información sobre herramientas que explique por qué está deshabilitado al pasar el mouse. Sin embargo, cuando se desactiva un button, la información sobre herramientas no se muestra.¿jQuery no activa el evento de desplazamiento sobre un botón deshabilitado?

He añadido un caso de prueba aquí, reproduciendo con sólo jQuery: http://jsfiddle.net/BYeFJ/1/

Parece que jQuery no está disparando el evento, o es el navegador no se dispare el evento de vuelo estacionario?

Estoy usando Twitter Bootstrap's Tooltip Module y, por supuesto, jQuery.

NB: También he intentado esto con un contenedor alrededor del botón, pero se traga el estado de vuelo estacionario, y también he intentado usar un elemento input, con el mismo efecto.

Fuente

2012-02-26 Mike Scott

Puede poner una superposición transparente sobre el botón y poner la información sobre herramientas en eso.

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

En el violín, puse el color a azul sólo para que pueda ver lo que está pasando. El ancho y la altura de la superposición se pueden ajustar según sea necesario o se pueden hacer dinámicos en js.

Fuente

2012-02-26 04:56:51

Incluso cuando envolviéndolo con un div, el botón se "traga" el vuelo estacionario ... –

Interesante, responder actualizada. –

Una posible solución es para que quede listo única:

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

a continuación, cambiar el css para buscar personas con discapacidad y redefinir la onclick para evitar cualquier acción: Guía de

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

Fuente

2013-01-16 22:27:39 minaz

Seguir James, tengo intentado así

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

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

Puse un botón falso con el mismo texto delante del viejo a nd set id a él. En el CSS, configuré la posición para permitir que este nuevo botón se relacione con el contenedor, de modo que este nuevo botón se colocará en el mismo espacio con el botón desactivado.

Aquí es mi violín: http://jsfiddle.net/p2j041Ln/

Fuente

2014-09-10 08:50:53 MuMug

Add 'ui-button-discapacitados' y 'ui-estado-con discapacidad clases por lo que se verá como un botón de discapacitados y comprobar si estas en la función de clic para determinar el estado. Quítelos cuando necesite la apariencia habilitada.

Fuente

2015-01-16 09:33:07 RawBits

Esto podría ayudar a

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

Fuente

2016-10-13 20:57:40

¿jQuery no activa el evento de desplazamiento sobre un botón deshabilitado?

Respuesta

Cuestiones relacionadas