jQuery - On hover with extended selector does not work

Question

On hover I want to call a function. If the element has the class "disabled_btn" it shall be supressed. Why is mode code not working? jsfiddle

html

<button id="btn" > hover here</button>

JS

$('#btn:not(.disabled-btn)').on('hover', function(){ 
                alert('click');
            });

bit more explained here: http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover — vidriduch, Nov 21 '14 at 15:08
$( "#btn:not(.disabled-btn)" ).hover(function() { alert('click'); }); — HaveNoDisplayName, Nov 21 '14 at 15:09

score 3 · Accepted Answer · answered Nov 21 '14 at 15:06

3

Try mouseover instead of hover:

$('#btn:not(.disabled-btn)').on(' mouseover', function () {   
    alert('click');
});

answered Nov 21 '14 at 15:06

K K

2

After reading the question again, I think this works better for vuvus needs. `hover()` will trigger the event again on `mouseleave`, and that's not what he wants. Got confused by what he had already tried. I think this is the correct answer. – balzafin Nov 21 '14 at 15:18

score 1 · Answer 2 · answered Nov 21 '14 at 15:06

1

You should use .hover() instead of on("hover"). Like this:

$('#btn:not(.disabled-btn)').hover(function() {
    alert('click');
});

answered Nov 21 '14 at 15:06

balzafin

score 1 · Answer 3 · answered Nov 21 '14 at 15:06

There is nothing like hover on JS you need to use mouseenter or mouseover instead.

$('#btn:not(.disabled-btn)').on(' mouseenter', function () {   
    alert('click');
});

or

$('#btn:not(.disabled-btn)').on(' mouseover', function () {   
    alert('click');
});

score 1 · Answer 4 · answered Nov 21 '14 at 15:07

Ive update your code for you see Updated Code

$('#btn:not(.disabled-btn)').hover(function(){ 
                    alert('click');
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" class=""> hover here</button>

4 Answers4