CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 23989

Button ok but href link doesn't fire

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.

Upvotes: 3

Views: 142

Answers (2)

ddavison
ddavison

Reputation: 29032

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.

Upvotes: 3

pmandell
pmandell

Reputation: 4328

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.

Upvotes: 8

Related Questions