CODEWITHSUNDEEP
javascriptjquery
user889030
user889030

Reputation: 4754

How to add new attribute to hyperlink using jQuery

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

Upvotes: 0

Views: 73

Answers (2)

mplungjan
mplungjan

Reputation: 177684

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/>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 1

Related Questions