jQuery onclick event using javascript:void(0)

Question

I'm trying to modify a link so it shows javascript:void(0) when the link is hovered over.

$(document).ready(function(){
   if( $('.loggedinusername').length )  {
$("div#moresearches ul").append("<li id='xxx'><a href='https://exmample.org'>Link</li>");
   }
   });

I've tried:

$(document).ready(function(){
   if( $('.loggedinusername').length )  {
$("div#moresearches ul").append("<li id='xxx'><a href='javascript:void(0)' onclick="location.href='https://example.org'>Link</li>");
   }
   });

But it doesn't seem to work. I noticed that there are issues with the apostrophes but I can't seem to sort out how to make them work. Let me know if you need any more clarification and I'd happily provide it. Any help would be appreciated.

that's a really bad idea if you are looking to hide links from unhautorized users with this kind of code. It's enough to inspect the code from the browser to see them anyway — Lelio Faieta, May 15 '20 at 12:34
@LelioFaieta I know it is, but I'm working with a company that's demanding it, I know they can view source to grab the link but the people I'm working with don't seem to care, they just don't want it to show when people hover over it. — T.J., May 15 '20 at 12:35
@palaѕн The current behavior is it shows the void when you hover but the link itself doesn't resolve. When you click the link nothing at all happens. I'm sure it has to do with bad apostrophes but I've been staring at it for too long so I figured I'd ask people smarter than I. — T.J., May 15 '20 at 12:36
@palaѕн I did, I think my issue is incorrect escaping of apostrophes, but I can't seem to figure out which ones to escape or necessarily how to do it. — T.J., May 15 '20 at 12:46
Does this answer your question? [When to use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript) — Heretic Monkey, May 15 '20 at 12:51
@T.J. Just because the client doesn't know what they want, doesn't mean you should blindly follow it. A simple condition where you move the code logic outside of the render has the same effect, so the client won't even know the difference, meanwhile you just didn't create a massive security oversight that the client will complain to YOU about, when it will get inevitably exploited. — Samuel Hulla, May 15 '20 at 12:58
@Rawrplus Agreed, I'm going to try to figure out another solution. Believe me, I wasn't happy about it, so hopefully I'll come up with some solution to remedy that issue. — T.J., May 15 '20 at 13:48

score 2 · Answer 1 · answered May 15 '20 at 12:47

Here is a cleaner way to do it. Anyway this is a completely wrong approach for security. Put the link in your html this way.

<li id='xxx'><a href="javasctipt:void(0)" data-url="https://exmample.org" class="no-show-url" >Link</li>

Then in your document ready you just do:

$(document).ready(function(){
   if( $('.loggedinusername').length ){
       //I don't want you to see and follow the link
       $(".no-show-url").click(function(){
           e.preventDefault(); //not strictly necessary but reinforce the behaviour
       });
   }else{
       //you don't see but can follow the link
       var url = $(".no-show-url").data("url");
       window.location(url);
   }
});

Thank you so much, I'm going to give it a shot and see if it works. I appreciate your time. — T.J., May 15 '20 at 12:49

score 0 · Answer 2 · answered May 15 '20 at 12:53

You will just need to escape the double quotes like:

onclick=\"location.href='https://example.org'\"
     ___^___                              ___^___

Otherwise, it is messing up the generated output and redirection doesn't work.

Demo Here:

$("div#moresearches ul")
  .append("<li id='xxx'><a href='javascript:void(0)' onclick=\"location.href='https://example.org'\">Link</li>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="moresearches">
  <ul></ul>
</div>

score 0 · Answer 3 · answered May 15 '20 at 12:59

You can add a tooltip using the title attribute over your anchor tag, which will appear whenever the mouse hovers over it.

<li id='xxx'><a title="javasctipt:void(0)" href="https://exmample.org" >Click here </li>

I think this is the most optimized way of doing it.

jQuery onclick event using javascript:void(0)

3 Answers3