1

我只是一个初学者编码器,所以也许这个问题会让你微笑,但我找不到任何解决方案。

我有一个链接:

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

一切正常,直到我真正点击一个链接......每次我点击一个链接,它都会把我带到页面的顶部。谁能告诉我如何解决这个问题?

4

5 回答 5

2

可以使用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 次编辑)

于 2013-08-24T11:41:19.183 回答
1

您需要从事件处理程序返回 false

<div class="comments"><a href="#" onclick="return get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>
于 2013-08-24T11:18:11.930 回答
0

当使用(或滥用)A-Tag 作为 JavaScript 按钮时,您有两个选项来阻止默认行为(即跟随链接):

javascript: 无效 0

而不是设置href="#",使用它来完成工作并返回undefined,例如:href="javascript: void(get_comments('.$row['post_id'].'))". 有关更多信息,请参阅此答案void

event.preventDefault

更好的方法是将 HTML 和 JavaScript 分开(请参阅Unobtrusive JavaScript)并使用事件处理程序。在您的 JS 中,您可以简单地向 DOM-Element 添加一个处理程序

<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();
}
于 2013-09-25T07:52:47.673 回答
0

试试这个,它会工作

 <div class="comments"><a href="Javascript:void(0)" 
  onclick="get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>
于 2013-08-24T11:44:59.077 回答
0

这导致了这种行为:href="#"

所以如果你不想要它,你可以在href中调用一个javascript函数,或者不使用这个属性,那么你必须设计你的锚看起来像一个链接。

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 类那样样式的链接。

于 2013-08-24T11:26:22.323 回答