如何防止jQuery在点击时更改href属性？

Question

我有一组锚标签，看起来像这样：

<a href='#123'></a>

我使用#123作为id，我提供给AJAX调用。我点击链接拨打电话。单击链接后，除了显示AJAX调用的结果外，还会发生两件事：

1. 地址栏中的网址如下所示：www.localhost.com/foo#123。
2. 点击链接的href属性已从#123更改为AJAX地址www.localhost.com/bar#123。如果我没有进行AJAX调用（出于测试目的），则会更改为地址栏中的当前网址：www.localhost.com/foo#123。

如果我使用event.preventDefault，那么这两件事都不会发生。我想保留1.（更改地址栏中的哈希值），但我不会保留href的值，否则，随后点击同一链接会导致错误。

我该怎么做？

我的代码

我将包含我的代码的简化版本，它仍会产生相同的效果。

makeAjaxCall = (brandId) ->
  alert 'OK'

$ ->
  $('.box-trigger').on 'click', (e) ->
    makeAjaxCall($(this).attr('href'))

此代码加载到页面www.localhost.com/foo上。如果我点击链接，而不是通过“确定”生成提醒，则地址将更改为www.localhost.com/foo#123，并且链接的href也会更改为www.localhost.com/foo#123。

有关foo和bar

的说明

在makeAjaxCall函数中，如果我真的对网址www.localhost.com/bar进行了ajax调用，则href会更改为www.localhost.com/bar#123。但是，我删除了Ajax调用以尝试调试问题。在这种情况下，href会更改为当前网址，在本例中为www.localhost.com/foo#123。

解决方案

我最终使用event.prevenDefault +手动将哈希附加到地址栏网址，如下所示：

$ ->
  $('.lightbox-trigger').on 'click', (e) ->
    e.preventDefault()
    makeAjaxCall $(this).attr('href')
    window.location.hash = $(this).attr('href')

Answer 1

解决方案建议1

我会在评论中使用Optimus建议的数据参数。像这样：

<强> HTML

<a class="box-trigger" data-id="#123"></a>

注意：我根本没有href参数，这是因为我们根本不想让网址受到影响，对吧？毕竟这是一个AJAX调用。 （但这会使大多数浏览器无法将<a>标记识别为链接。它将失去其链接样式＆＃34;就像它在哪里。您可以通过简单地使用CSS进行样式化来轻松地模拟它。 ）

<强>的CoffeeScript

makeAjaxCall = (brandId) ->
  alert 'OK'

$ ->
  $('.box-trigger').on 'click', (e) ->
    makeAjaxCall($(this).data('id'))

注意：我从未使用过CoffeeScript，所以这只是猜测。

解决方案建议2

如果由于某种原因希望将ID作为href内的锚点，您可以查看JQuery event.preventDefault()函数。这可能会阻止网址更改以及您遇到的所有其他行为。