CODEWITHSUNDEEP
jqueryhtml
sushil bharwani
sushil bharwani

Reputation: 30197

Hover not working on disabled input field?

I have a disabled input field on hover of which i want to do a popup which says this field will be automatically populated.

<input type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input" disabled="disabled" style="background-color:#FFFF66" value="">

Here is my jQuery which is not working.

$('input:disabled').hover( 
    function(){
        alert("hello");
    },
    function(){ 
        alert("bye");
    }
 );

Can anyone suggest how I can achieve this.

Upvotes: 4

Views: 17483

Answers (5)

Bhuvan Arora
Bhuvan Arora

Reputation: 154

I worked around the button issue by adding a wrapper, and adding hover on the wrapper, then setting z-index of the button underneath the layer when disabled. A bit of a pain, but seems to work fairly well: I tested it, this solution is working for every other disabled form elements like input/textarea.

<div class='wrapper-div' onmouseover='function()'>
<button disabled> Having Z-index: -1 </button>
</div>

http://jsfiddle.net/M6xxk/

Upvotes: 0

Abhishek Punj
Abhishek Punj

Reputation: 289

You can enclose your input box within a div and raise the alert on hove of the div. I tried it out and it works just perfect.

<div id="hov"><input type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input" disabled="disabled" style="background-color:#FFFF66" value=""></div>

$('#hov').hover(function(){
  alert("hello");      
});

I hope this solves your problem.

Upvotes: 2

luckyamit
luckyamit

Reputation: 749

try this //HTLM

<input id="txt" type="text" class="dcol" data-toggle="popover" data-content="Required Field with Numeric Input"  style="background-color:#FFFF66" value="">

//SCRIPT

$("#txt").hover(function(){
alert("this field will be automatically populated!"); 
 $(this).attr('disabled','disabled');

});

fiddle example

Upvotes: -1

Vikas Arora
Vikas Arora

Reputation: 1666

The mouse event will not get fired on the disabled field. What you can do is put an element in front of the disabled field and put your mouse event on that element.

This will tell you exactly how to do it

However, other thing you can do is keep the field enabled and on hover over, disable it and show the alert message. Like:

$('input').hover(function(){
  alert("hello");
   $(this).attr('disabled','disabled');        
});

I have created a fiddle for it. You can check it out here.

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388416

It is done intentionally by jQuery. See this bug from jQuery

This was done intentionally in jQuery.event.dispatch based on #6911 to normalize a cross-browser behavior. However it seems inadvisable for us to do it, at least for some set of events. We can easily revert the change but it will cause other bug reports.

Upvotes: 2

Related Questions