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

Question

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

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

我使用 #123 作为 id，我将其提供给 AJAX 调用。我通过单击 link 进行调用。单击 link 后，除了显示 AJAX 调用的结果外，还会发生两件事：

地址栏中的 url 得到这样的哈希值：www.localhost.com/foo#123.
单击的 link 的 href 属性从 #123 更改为 AJAX 地址 www.localhost.com/bar#123。如果我不进行 AJAX 调用（出于测试目的），那么它会更改为地址栏中的当前 url：www.localhost.com/foo#123.

如果我使用 event.preventDefault，那么这两种情况都不会发生。我想保留 1。（更改地址栏中的哈希值），但我不会保留 href 的值，否则，随后单击相同的 link 导致错误。

我该怎么做？

我的代码

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

makeAjaxCall = (brandId) ->
  alert 'OK'

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

此代码在页面 www.localhost.com/foo 上加载。如果我单击 link，然后我使用 'OK' 生成警报，地址会更改为 www.localhost.com/foo#123，并且 link 的 href 也会更改为 www.localhost.com/foo#123.

关于 `foo` 和 `bar`

的澄清

在makeAjaxCall函数中，如果我真的ajax调用了urlwww.localhost.com/bar，那么href就变成了[=18] =].但是，我删除了 Ajax 调用以尝试调试问题。在那种情况下，href 更改为当前 url，在这种情况下 www.localhost.com/foo#123.

解决方案

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

$ ->
  $('.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这个参数，这是因为我们不希望URL在好的？毕竟是 AJAX 电话。（然而，这会使大多数浏览器无法将 <a> 标记识别为 link。它会失去它的 "link styling" 原样。您可以通过使用 CSS.)

CoffeeScript

makeAjaxCall = (brandId) ->
  alert 'OK'

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

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

解决建议2

如果您出于某种原因希望将 ID 作为 href 内的锚点，您可以查看 JQuery event.preventDefault() 函数。这可能只会阻止 URL 发生变化以及您遇到的所有其他行为。

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

How to prevent jQuery from changing href attriute on click?

javascript

ajax

jquery

coffeescript

我的代码

关于 `foo` 和 `bar`

解决方案

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

How to prevent jQuery from changing href attriute on click?

javascript

ajax

jquery

coffeescript

我的代码

关于 foo 和 bar

解决方案

关于 `foo` 和 `bar`