Невозможно предотвратить событие по умолчанию в javascript

Question

Я просто начинающий кодер, поэтому, возможно, эта проблема заставит вас улыбнуться, но я просто не могу найти какое-либо решение.

У меня есть ссылка:

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

Что щелкнул запускает функцию:

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

Все работает отлично, пока я не нажать на ссылку ... Каждый раз, когда я нажимаю на ссылку, он выводит меня на верх страницы. Может ли кто-нибудь посоветовать мне, как исправить эту проблему?

Answer 1

Вы должны возвратить ложь из обработчика события

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

Answer 2

Это причина, что поведение: href="#"

Так что, если вы не хотите, вы можете вызвать функцию яваскрипта в HREF, или нет используйте этот атрибут, тогда вам нужно создать свой якорь, чтобы он выглядел как ссылка.

href="#" означает, что в начале страницы. Вы можете использовать другие ссылки: href="#foo" это означает перейти на <hr> с id foo.

возможные решения:

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

или

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

Если удалить HREF, это не будет выглядеть как ссылку так стиле .mylink класса.

Answer 3

Это нормально использовать href="#", но я не вижу вашу функцию preventDefault.

Попробуйте это:

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'); 
     /* ... */ 
    }); 
}); 

с .data() вы можете получить доступ к data-* атрибутов.

с .click() у вас есть лучший обработчик событий, чем onclick, пройти событие (нажмите «#») и предотвратить его!

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

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

(извините за 1000 правок в ответ)

Answer 4

попробуете это сделать, будет работать

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

Answer 5

При использовании (или злоупотребления) A-Tag в качестве кнопки JavaScript, у вас есть два варианта предотвращения поведения по умолчанию (т.е. е.перейдя по ссылке):

JavaScript: недействительным 0

Вместо установки href="#", использовать его, чтобы получить работу и вернуть undefined, например .: href="javascript: void(get_comments('.$row['post_id'].'))". См. Это answer для получения дополнительной информации о void.

event.preventDefault

Лучший способ отделено вашего HTML и JavaScript (см Unobstrusive JavaScript) и использовать обработчики событий. В вашем JS вы можете просто добавить обработчик к DOM-элемент

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

по

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