How to add new attribute to hyperlink using jQuery

Question

I wonder how can we add new attribute to hyperlink using JQuery i tried various selection methods but none of them working on my html code

html code

<a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

js code

 jQuery(window).load(function () {
 // if contain contact#faq
 jQuery('a[href~="contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 // if url equal to 
  jQuery('a[href="https://useotools.com/contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 // if url end with
   jQuery('a[href$="contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

  // if url start with
   jQuery('a[href*="useotools.com/contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 });  

codepen : https://codepen.io/Zelda99/pen/poJxmEL

Answer 1

Your selector was ok. Using prop to change onclick not ok.

Your jQuery(window).load(function () {}) is incorrect too, it should be jQuery(window).on('load',function () {})

I prefer $(function() {})

 $(function() { $('a[href$="contact#faq"]') .css("background-color","red") // check the selector is ok .attr("onclick", "window.location.href='https://useotools.com'; alert('bla'); return false;"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

I prefer on click

 $(function() { $(".current").on("click", function(e) { // or $("[href$='contact#faq']").on() // if (this.href.indexOf("contact#faq") !=-1) this.href = 'https://useotools.com'; if (this.hash==="#faq") this.href = 'https://useotools.com'; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

To change location you can do

 $(function() { $("[href$='contact#faq']").on("click", function(e) { e.preventDefault(); // stop the link click location = 'https://useotools.com'; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

 $(function() { $("#link1").prop("onclick","alert(this.href); return false"); $("#link2").prop("onClick","alert(this.href); return false"); $("#link3").attr("onClick","alert(this.href); return false"); $("#link4").attr("onclick","alert(this.href); return false"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://google.com" id="link1">prop onclick Not ok</a><br/> <a href="https://google.com" id="link2">prop onClick Not ok</a><br/> <a href="https://msn.com" id="link3">attr onclick works</a><br/> <a href="https://cnn.com" id="link4">attr onClick works</a><br/>

Answer 2

If you want to change the href property of an element you just need to use prop() . You don't need to create a separate click handler for it.

Also note that all of the conditions you create boil down to a single one: if the href contains contact#faq . As such you can use a single attribute selector.

Lastly load() is not an event handler. You need to use on('load') instead. Try this:

$(window).on('load', function() {
  $('a[href*="contact#faq"]').prop('href', 'https://useotools.com');
});

It's also worth noting that the window.load event is not the same as document.ready , so you may want to change that event handler depending on your exact needs.