Clicking anchor should execute javascript not go to new page

Question

I have a HTML anchor that when clicked should make a div slide up or down (I call JQuery\'s .slideToggle(); function);

My Problem: When

Answer 1

You want this:

<a class="interactiveLink" onclick="$('#attachFileContainer').slideToggle(); return false;" href="#">Attach File</a>

The return false prevents the link from doing anything after the onclick stuff runs.

Answer 2

I see a lot of answers that involve work-arounds, but none that hit the heart of the issue. The why behind what you're doing is not working, and why it often does work.

You're using javascript:XXX as the value for the href, hypertext source link, attribute on your anchor tag. Where XXX is some piece of javascript code, an expression, such as a function call.

When using this notation, the XXX code is first evaluated. If the expression results in a value, then most browsers will clear the page and display only the resultant value.

For example,

<a href="javascript:1+1">Click here!</a> will result in 2 being displayed.

Similarly, this could be rewritten with a function to produce the same results:

function addTwo() {
    return 1+1; 
}

<a href="javascript:addTwo()">Click here!</a> (expected output 2)

For most browsers, if the XXX code is evaluated and does not result in a value, then it has nothing to display -- as such, it will stay on the same page. So, there's a few ways to achieve this behavior.

• We could assign the result to a variable.

<a href="javascript:var two = addTwo()">Click here!</a>

There is no result left over during assignment.

• We could wrap another function that does not return anything around this function.

A.

function addTwo2() {
    addTwo();
}
<a href="javascript:addTwo2()">Click Here!</a>

B. Same thing, but all inline:

<a href="javascript:(function() { addTwo();})()">Click Here!</a>

C. Same thing, but with the ! idiom you'll often see. (Same logical meaning, just uses the not operator to achieve less characters used):

<a href="javascript:!function() { addTwo();}()">Click Here!</a>

• We could instead do what is referred to as hooking in most functional programming languages:

  function addTwo() {     
      alert( "sfsf" );
      return 1+1; 
  }
  
  var x = addTwo;
  
  addTwo = function() {
      x();    
  }
  

  <a href="javascript:addTwo();">Click Here!</a>

• Lastly, if your function or expression does not need to return anything, simply don't do it in that function.

So in summary:

When your anchor using a javascript: href is clicked, the javascript code after javascript: is first evaluated, if it results in a value the browser will display only the result, otherwise the browser will stay on the page it currently is on since it has no value to display.

Answer 3

An A element with an href is a link, not an anchor (anchors are A elements with name attribute and are the target of links).

Since the element isn't being used either as a link or target, you shouldn't be using an A element at all, use a button or styled span. Then you don't need to worry about the default behaviour of a link.

<button class="interactiveLink" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</button>

or

<span class="interactiveLink button" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</span>

Answer 4

instead of write inline JavaScript code, try below. preventDefault method prevents the default action of the element. In your case, it prevents default action of the click event, which is, going to new page

$(".interactiveLink").on("click", function(e){
   e.preventDefault();
   $('#attachFileContainer').slideToggle();
});

Make your html code as

<a class="interactiveLink" href="##">Attach File</a>

Answer 5

Solution 1:

HTML:

<a href="#">Click me</a>

jQuery:

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

---

Solution 2:

HTML:

<a href="#.">Click me</a>

---

Solution 3:

HTML:

<a href="javascript:void(0);">Click me</a>

---

Solution 4:

HTML:

<a href="#">Click me</a>

jQuery:

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

---

Solution 5:

HTML:

<a href="javascript://">Click me</a>