jquery: remove the pointer cursor?

Question

Why can't I change the CSS of an a tag with jquery? For instance,

html,

<a href="#">1</a>
<a href="">2</a>
<a href="http://website.com/#/home/about/">3</a>
<a href="http://website.com/home/about/">4</a>

link 1 and 2 are not clickable so I want to remove the pointer cursor.

jquery,

$("a").click(function(e){
    if($(this).attr("href") == "#" || $(this).attr("href") == "") {
        alert("this is non-clickable");
        $(this).css({cursor:"default"});
        e.preventDefault();   
    }
    else{
        alert($(this).attr("href"));
        $(this).css({cursor:"pointer"});
        e.preventDefault();   
    }
});

is it possible?

jsfiddle

Multiangular

It works for me. What isn't working? What browser are you using? – Solanaceous

I second it. It works. – Define

@joespina Firefox shows cursor: pointer; in the fiddle he has shared :) – Cretic

@Mr.Alien really? tested it right now on FF 22.0 and it works . . odd – Define

@joespina quiet indeed, it shows me a hand when I hover 1 and 2 links :-/ – Cretic

@Mr.Alien well its the default after you click on it. At the start its a pointer, but after clicking on the 1/2 link it changes to the default. – Define

@joespina yes, that's the thing he was pointing out, he wanted to avoid that pointer on hover too... IMO.. – Cretic

@Mr.Alien hmmm. if he wanted a jquery method of changing cursor well then his code shouldn't use .click but maybe .mouseenter or mouseover. But still your css method is still better. – Define

Answer 1

If you want you can simply do this with the CSS

a[href="\#"], a[href=""] {
    cursor: default;
}
/* I've used an element[attr] selector here which will select all a tags 
   with this combination, if you want to target specific a tags, 
   wrap them in an element with a class and you can than refer as 
   .class a[href]... */

Demo

If you want to disable the links, you can achieve that too using CSS pointer-events: none; property

Demo 2 (Will help you if JS is disabled, this won't alert the message, but it will help you to disable the event which you are trying to do)

Cretic

Answer 2

Your error is in your jquery css. You need quotes round css your js should look like this:

$("a").click(function(e){
    if($(this).attr("href") == "#" || $(this).attr("href") == "") {
        alert("this is non-clickable");
        $(this).css({'cursor' :"default"});
        e.preventDefault();   
    }
    else{
        alert($(this).attr("href"));
        $(this).css({'cursor':"pointer"});
        e.preventDefault();   
    }
});

Also you could use addClass method then in the css have a style for no href

Stephie

No. The problem is not here. You don't need quotes. – Grouping

Have you seen the add class – Stephie

Yes and ? I don't understand why you speak about the addClass method. – Grouping

You could add a class if the href is "" or "#" then have a style in css for that style of cursor: default – Stephie

Answer 3

try to change the line

from

$(this).css({cursor:"default"});

to

$(this).css('cursor','default');

let me know if you face any problem

Downwards