Unable to prevent a default event in a javascript

Question

I'm just a beginner coder, so maybe this problem will make you smile, but I just can't find any solution.

I have a link:

 <div class="comments"><a href="#" onclick="get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

Which clicked triggers a function:

 function get_comments(id) {
 x = "#cf"+id;
 y = "#comments"+id;
 $(x).toggle(100);
 var dataString = id;
 $(".loading").ajaxStart(function () {
 $(this).show();
 });
 $(".loading").ajaxStop(function () {
 $(this).hide();
 });

 $.ajax({
 type: 'POST',
 url: 'load_comments.php',
 data: {'dataString':dataString},
 cache: false,

 success: function(data){
 $(y).html(data);
 }
 });
 return false;    
 };    

Everything works fine, until I actually click a link... Every time I click a link, it takes me to the top of a page. Can anybody advise me how to fix this problem?

Answer 1

You need to return false from the event handler

<div class="comments"><a href="#" onclick="return get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

Answer 2

This cause that behaviour: href="#"

So if you dont want it, you can call a javascript function in href, or don't use this attribute, then you have to design your anchor to look like a link.

href="#" means go to top of the page. You can use another references: href="#foo" that means jump to <hr> with id foo.

possible solutions:

<a href="javascript:get_comments('.$row['post_id'].')">

or

<a onclick="get_comments('.$row['post_id'].')" class="mylink">

If you remove href, it won't look like a link so style with .mylink class.

Answer 3

It's ok to use href="#" but I don't see your preventDefault function.

Try this:

HTML:

<div class="comments">
    <a href="#" class="comments-click" data-id="'.$row['post_id'].'">'.$comments_no.' comments</a>
</div>

JS:

$(document).ready(function() {
    $('.comments-click').click(function(event) {
        event.preventDefault(event);
        id = $(this).data('id');
        /* ... */
    });
});

with .data() you can access data-* attributes.

with .click() you have a better event handler than onclick, pass the event (click on '#') and prevent it!

JSFiddle: http://jsfiddle.net/aCLyw/2/

http://api.jquery.com/event.preventDefault/

(sorry for 1000 edits to the answer)

Answer 4

Try this, It will work

 <div class="comments"><a href="Javascript:void(0)" 
  onclick="get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

Answer 5

When using (or abusing) an A-Tag as a JavaScript button, you have two options to prevent the default behaviour (i.e. following the link):

javascript: void 0

Instead of setting href="#", use it to get the work done and return undefined, e.g.: href="javascript: void(get_comments('.$row['post_id'].'))". See this answer for a bit more information on void.

event.preventDefault

The better way is separate your HTML and JavaScript (see Unobstrusive JavaScript) and use event handlers. In your JS you can simply add a handler to the DOM-Element

<a id="commentsLink" data-id=".$row['post_id']." href="#">comments</a>

by

var commentsLink = document. getElementById("commentsLink");
commentsLink.addEventListener("click", function(event) {
  var postId = event.target.getAttribute("data-id");
  // your code
  event.preventDefault();
}