jquery/ajax loading href onClick for multiple links

Question

Building a menu inside of ionic 4 progressive web application and I am using ajax /jquery to load pages into a div. Is there any way to tell the jquery / to load the href src= of the clicked element with the specific class. instead of adding this same code 20 times to load each different page

$('.classofButton').click ( function () {
     $('#content').load ('href of clicked object or link etc') ; 
} );

Try using $(this) to get clicked element and work on top of it achieve what you want. — Sathishkumar
– Sathishkumar, Commented Dec 17, 2019 at 19:35

CumminUp07 · Accepted Answer · 2019-12-17 19:44:48Z

1

You can get the href by using this

$('.classofButton').click ( function () {
     $('#content').load ($(this).attr('href')) ; 
} );

answered Dec 17, 2019 at 19:44

CumminUp07

1,9781 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamid Javadi · Accepted Answer · 2019-12-17 19:50:59Z

0

You can do it like this.

$('.classofButton').click(function(event) {
  event.preventDefault();
  
  var href = $(this).attr('href');
  $('#content').load(href) ; 

});

#content {
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="classofButton" href="http://google.com">google.com</a>
<a class="classofButton" href="https://yahoo.com">yahoo.com</a>
<div id="content"></div>

answered Dec 17, 2019 at 19:50

Hamid Javadi

2112 silver badges7 bronze badges

Collectives™ on Stack Overflow

jquery/ajax loading href onClick for multiple links

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related