Why won't this .click() work like .hover()?

Question

This works:

$("a.hover").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);

This doesn't:

$("a.click").click(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);

I understand it may not be designed to work like this, but why not?

I'm also not entirely sure what having the second function after the comma actually does. I have only ever written it like this:

$("a.click").click(function (){
        $(this).css("text-decoration", "underline");
    });

http://jsfiddle.net/tmyie/4DygF/7/

Any clarification would be great.

So you've invented a syntax and then wonder why it doesn't work? — JJJ, Dec 03 '13 at 13:04

score 4 · Answer 1 · edited May 23 '17 at 12:28

The .click() register's a click handler to the target set of elements, the hover() is a shortcut to register the mouseenter and mouseleave handlers.

hover:

Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

.click() also had a similar short using .toggle() but it was removed in jQuery 1.9.

For now if you want the same functionality you can look at this toggleClick() implemetation

score 0 · Answer 2 · answered Dec 03 '13 at 13:05

0

.hover() takes two callbacks - one for hovering in and one for hovering out. .click() should only be given one callback. Since you're giving it two, it's actually thinking the second one is the click callback.

answered Dec 03 '13 at 13:05

sbking

7,630
24
33

score 0 · Answer 3 · answered Dec 03 '13 at 13:06

0

The definition of the jQuery click event, as shown at http://api.jquery.com/click/ is:

.click( handler(eventObject) )

It takes one parameter, that is the function to execute when the click event has been fired. In your example you provide two functions as parameter to the click function. Therefore this is not going to work.

answered Dec 03 '13 at 13:06

Bas van Dijk

9,933
10
55
91

2

The reason it doesn't work is because it also has a second definition, `.click( [eventData ], handler(eventObject) )`. So the second function is actually being used as the handler. Otherwise, it would work fine, JavaScript doesn't mind extra parameters. – sbking Dec 03 '13 at 13:07

score 0 · Answer 4 · answered Dec 03 '13 at 13:07

0

for the click you can use if/else like so: because Click event have 1 callback function

    var state=0;
    click(function(){
    if(state==0){
    //do this
    state=1;
    }
else{
    //do this
    state=0;
    }
    });

answered Dec 03 '13 at 13:07

Hamed mayahian

2,465
6
27
49

MonkeyZeus · Answer 5 · 2013-12-03T13:17:06.580

You can make it work by doing something like this:

// listen for a.click to be clicked within the scope of the body
$('body').on('click', 'a.click', function(e){

    // prevent the click from registering
    e.preventDefault();

    // check if text-decoration is an underline
    if($(this).css('text-decoration').substring(0, 9) == 'underline'){
        // set it to nothing
        $(this).css('text-decoration', 'none');
    }
    else{
        // set it to underline
        $(this).css('text-decoration', 'underline');
    }
});

score 0 · Answer 6 · answered Dec 03 '13 at 13:10

0

That's because with .hover you can add two handlers (handlerIn, handlerOut), but .click only have one handler

answered Dec 03 '13 at 13:10

Maxi Baez

578
5
13

score 0 · Answer 7 · answered Dec 03 '13 at 13:11

0

If you want click to behave like toggle.Try this:

var a=1;
$("a.click").click(function (){
if(a==1){
    $(this).css("text-decoration", "underline");
    a=0;
}else{
    $(this).css("text-decoration", "none");
    a=1;
}
});

Demo

answered Dec 03 '13 at 13:11

Joke_Sense10

5,341
2
18
22

Why won't this .click() work like .hover()?

7 Answers7