18

jQuery超链接-href值？文本1]

我正在使用 jquery 和附加到锚元素的单击事件遇到问题。[1]：jQuery 超链接——href 值？“这个”SO问题似乎是重复的，并且接受的答案似乎并不能解决问题。对不起，如果这是不好的礼仪。

在我的 .ready() 函数中，我有：

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
        Function_that_does_ajax();
        });

我的锚看起来像这样：

<a href="#" id="id_of_anchor"> link text </a>

但是当点击链接时，ajax功能按要求执行，但浏览器滚动到页面顶部。不好。

我试过添加：

event.preventDefault();

在调用我执行 ajax 的函数之前，但这无济于事。我错过了什么？

澄清

我用过每一种组合

return false;
event.preventDefault(); 
event.stopPropagation();

在我调用我的 js ajax 函数之前和之后。它仍然滚动到顶部。

4

8 回答 8

18

这应该可行，你能澄清一下“之前”的意思吗？你在做这个吗？

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});

因为这应该在某种意义上起作用，如果它不起作用，你做错了什么，我们需要查看更多代码。但是，为了完整起见，您也可以尝试以下操作：

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});

编辑

这是这个工作的一个例子。

这两个链接使用此代码：

$('#test').click(function(event) {
    event.preventDefault();
    $(this).html('and I didnt scroll to the top!');
});

$('#test2').click(function(event) {
    $(this).html('and I didnt scroll to the top!');
    return false;
});

正如你所看到的，它们工作得很好。

于 2009-06-30T03:32:22.313 回答
5

你可以使用 javascript:void(0); 在 href 属性中。

于 2009-07-04T05:14:04.023 回答
5

正如蒂拉尔上面所说：

<a id="id_of_anchor" href="javascript:void(0)" />

保持锚标记看起来正确，允许您使用 javascript 为其分配点击处理程序，并且不会滚动。正是因为这个原因，我们才广泛使用它。

于 2010-10-22T21:16:26.343 回答
3

这个问题更像是一个调试练习，因为它表明您正在使用来自jQuery Event object的正确函数。

在 jQuery 事件处理程序中，您可以执行以下两项基本操作中的一项或两项：

1.防止元素的默认行为（在您的情况下是 A HREF="#"）：

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

2. 阻止事件传播到周围 HTML 元素上的事件处理程序：

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

由于您没有得到预期的行为，您应该暂时取消 ajax 调用，将其替换为一些无害的代码，例如设置表单值，或 -shudder- alert("OK")并测试您是否仍然滚动到顶部.

于 2009-06-30T05:35:38.680 回答
2 
$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}
于 2009-06-30T03:32:19.643 回答
2

只是失去

href="#"

在一个 html 标签中......这就是导致网页“跳起来”的原因。

<a id="id_of_anchor"> link text </a>

并记得添加

cursor: pointer;

到您的 a 的 css，因此它看起来像鼠标悬停时的链接。

祝你好运。

于 2013-12-10T17:24:59.933 回答
0

我一直有同样的问题。

我认为在将元素附加到 DOM 之前绑定事件时会发生这种情况。

于 2010-04-05T11:08:33.697 回答
0

下面的代码对我有很大帮助。谢谢！

        $(document).ready(function() {
        $(".dropdown dt a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").toggle('slow');
        });           
        $(".dropdown dd ul li a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").hide();
        });
    });
于 2011-10-27T16:58:07.460 回答