Gnarkkkkk Gnarkkkkk - 7 months ago 11
Javascript Question

jQuery hide function works with "button" and "span" but not with "a" element

I am working on a website for an academic project and I just encountered a pretty weird problem. I have searched but was unable to find anything similar.

I have a form that I hide/show (jQuery functions) using some buttons. And it works perfectly. But i also want to display this form when the user clicks on a link (html

a
element). The problem is that when I click on the link the form appears and disappears very quickly. It works perfectly if I replace the
a
element with a
button
or a
span
.
For information I use
jade
as a templating engine to create my HTML.
Here is an example of the jade:

a#edit(href="") #{event.name} // it is the link the create the problem

button#edit(href="") #{event.name} // but like that it work very well


And here is how I hide my form with JavaScript

$('#edit').on('click', function(){
$('#addForm').show();
});


edit: the solution

$('#edit').on('click', function(e){
e.preventDefault();
$('#addForm').show();
});

Answer

I think you need to add (if not present) the code to block the default behavior of the a tag

event.preventDefault();
//code
return false;
Comments