jquery - Clicking anchor should execute javascript not go to new page - Stack Overflow

admin管理员组

文章数量:1403452

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 I click the link, instead of executing code, it goes to a new page, where the url is the javascript code, in my case, "javascript: $('#attachFileContainer').slideToggle();" and the contents of the page(body) is simply "[object Object]".

My Code:

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

What is going wrong, I have had many anchor elements where I call javascript from the href attribute and this have never happened?

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 I click the link, instead of executing code, it goes to a new page, where the url is the javascript code, in my case, "javascript: $('#attachFileContainer').slideToggle();" and the contents of the page(body) is simply "[object Object]".

My Code:

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

What is going wrong, I have had many anchor elements where I call javascript from the href attribute and this have never happened?

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 5, 2012 at 2:14 frictionlesspulley 12.4k1515 gold badges7272 silver badges123123 bronze badges asked Mar 5, 2012 at 2:08 sazrsazr 25.9k7070 gold badges214214 silver badges386386 bronze badges 1

• 1 Don't use an A element when you don't want an A element. Use an element that is more appropriate, like a button or styled span. – RobG Commented Mar 5, 2012 at 2:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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.

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>

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.

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>

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>

本文标签： jqueryClicking anchor should execute javascript not go to new pageStack Overflow