Anchor link only works by "Open link in new tab" command

Question

I meet this interesting situation:

<ul>
    @foreach (var item in Model)
    {
      <li>
        <a href="@Url.Action("Details", "Product", new { id = item.Id })" >@item.Name</a>
      </li>
    }
</ul>

When I click a link, nothing happen, product Details page does not open. But I do "Open link in new tab", then it opens. What can be it's reason?

Versicle

Some JavaScript magic. – Arenicolous

Any JS that could prevent the default action of an anchor tag in your code maybe ? – Degreeday

Could you inspect the generated HTML for that Razor view? I suspect it to generate an empty url in the href attribute. – Ari

May be it depends on some JS, I can not find.. I inspected, url is full: <a href="/Product/Details/8">Lorem ipsum dolor..</a> – Versicle

Answer 1

You have some javascript code which is preventing the default action of the anchor tag to be executed. You could inspect the Network tab in FireBug or Chrome DevTools to see if some AJAX request is being made when you click on the link. You could try excluding javascript files until you find the one that is doing this.

Cas

On chrome, DevTools has a view called "Event listeners" which allows you to identify any such event handlers. One drawback is that it does not show inherited handlers. – Eckmann

Old post but answer helped me out today! had a stray return false on a document click handler... Thanks! – Charioteer

Looking at the Response headers helped me track down why a simple link to a Facebook group was being denied by FB. Thanks! – Retrieval

Mine was a dynamic href that changed now and then. I saw that I was resetting the href every few seconds due to different methods taking place. – Readus

To confirm that it's JS, you could try disabling all JS in Chrome settings and see if that fixes issue – Herdic

Answer 2

Maybe you prevented the redirection event of a tag with JavaScript.

For example:

$(document).on('click', 'a.thatTag', function (e) {
   // ...
   e.preventDefault();
});

.preventDefault() prevents redirection.

Hygroscopic

Answer 3

Correctly given by Darren, it is definitely some javascript code that is sending an AJAX request (post or get) that is preventing the link from functioning as you would expect.

However, if you've used an external resource, it might be difficult to correct the error in the min files.

I suggest use a jquery onclick event inline to circumvent the AJAX call

<a href="http://foo.bar/" onclick="window.open('https://www.foo.bar/culrsteam')">Foo</a>

You could additionally use window.open('https://www.foo.bar/culrsteam', '_blank') like with target='_blank'

Thenna

Thanks for the practical answer. The issue for me was due to the the jquery included with the template. – Boris

Answer 4

Try this code...

<a href="http://google.com/" onclick="location.replace('http://google.com/'),'_top'">Google</a>

Disturb

Answer 5

I had e.preventDefault() set on the parent element.

Logotype

This is an easy mistake to make when you're moving fast. I had this inside an onClick event handler which prevented the link from working properly. – Cortes

Answer 6

This may happen if the address does not have the transfer protocol within the href attribute. An example would be linking localhost as <a href="localhost"></div> instead of <a href="http://localhost"></div>. You will see that Google Chrome will give a cancelled status if done so, and in Safari a dialog will appear asking which application the link should be opened in, as the transfer protocol is unknown. I encountered this problem when setting the link to $_SERVER['HTTP_HOST'] in PHP.

Key point being, make sure you leave the transfer protocol in front of the link be it http://, https://, ftp:// or whatever else.

Nadean

Answer 7

I know this is an old question, but having just had a similar issue, it sounds like the issue may be that your request is being blocked by the browser. This can happen if you're currently in a secure (https) environment trying to link to an insecure (http) resource.

It's not clear what your href is, but make sure the href is https (or //) if your current environment is secure.

Coursing

Answer 8

I came across this issue in ReactJS after using JS to set the href property of a link. I solved it using a useState hook for what the link should be.

Kleper

Answer 9

I had data-bs-dismiss="modal" which closing my modal but preventing redirection

Ambry

Answer 10

For my case it was the filename for the page files. When I renamed pages/About.tsx to pages/about.tsx it worked.

Shroyer