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?

In my opinion, onlick event handlers in combination with jQuery are deprecated. Make use of the full power of jQuery, not only a little :-) — Daniel W.
– Daniel W., Commented Aug 24, 2013 at 11:50
Can you please format this better and remove code that is not required for the example? E.g. almost anything inside get_comments? — Thorben Croisé
– Thorben Croisé, Commented Sep 25, 2013 at 7:47

Daniel W. · Accepted Answer · 2013-08-24 11:54:38Z

2

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)

edited Aug 24, 2013 at 11:54

answered Aug 24, 2013 at 11:41

Daniel W.

32.6k15 gold badges99 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-08-24 11:18:11Z

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>

answered Aug 24, 2013 at 11:18

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Amit · Accepted Answer · 2013-08-24 11:44:59Z

0

Try this, It will work

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

answered Aug 24, 2013 at 11:44

Amit

15.4k8 gold badges49 silver badges69 bronze badges

2 Comments

Bergi Over a year ago

It will work, but is deprecated and highly despised. If jQuery is available, one has very simple tools to do it properly.

Thorben Croisé Over a year ago

Can you please state where you found this to be deprecated?

speti43 · Accepted Answer · 2013-08-26 07:39:47Z

0

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.

edited Aug 26, 2013 at 7:39

answered Aug 24, 2013 at 11:26

speti43

3,0622 gold badges22 silver badges26 bronze badges

1 Comment

Bergi Over a year ago

An anchor element without a href attribute is invalid in HTML4

Community · Accepted Answer · 2017-05-23 11:50:02Z

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();
}

Collectives™ on Stack Overflow

Unable to prevent a default event in a javascript

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related