Button ok but href link doesn't fire

Question

I have JQuery code:

$("#step1Skip").on("click", function(event){
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

If I use a button e.g.

<button type="button" id="step1Skip">Skip this step >></button>

This works fine. BUT, if I try the same with a simple link:

<a href="#" id="step1Skip">Skip this step</a>

It does nothing, simply doesn't work. Why is that?

I don't try them at the same time, so it's not an ID issue.

score 8 · Accepted Answer · answered Jun 18 '13 at 17:43

Your browser is trying to follow the link. Try using .preventDefault()

$("#step1Skip").on("click", function(event){
    event.preventDefault();
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

This will prevent the default action of the link from occurring.

score 3 · Answer 2 · edited May 23 '17 at 11:50

Since it is a link, the link is performing it's default action. You need to prevent it from doing so, and use preventDefault()

$("#step1Skip").on("click", function(event){
    event.preventDefault();
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

Another note - this is useful for only the <a>. Since buttons do not have a default action, they are unhindered by using event.preventDefault()

Take a look at http://api.jquery.com/event.preventDefault/

This question can be helpful on understanding how default actions work with a link.

Button ok but href link doesn't fire

2 Answers2