0

Following on my from my previous question here: How to show a page by default on page load

I'm basically using jQuery to load links in a div - this works perfectly. However, what I want to now achieve, is when one of the pages (opened in the div) has a hyperlink, how can I open the hyperlink in the same div the page sits in now?

Let's say I have a menu: Home | Service | About

If you click service - it loads the page inside a div - awesome.

But let's say service has a hyperlink to another page (on the same domain/setup) - currently using my code referenced in the question above, the link just opens in a new tab... This isn't the behaviour I want.

Here is the code:

  $('[data-target]').click( function (e) {
$.get($(this).attr('href'), function(data){ 
 $('#halloffame').empty(); 
  $(data).find(".partner_body").appendTo("#halloffame");

});
e.preventDefault(); // prevent anchor from changing window.location
  }); 
  $.get( "pages/accounting-software/", function( data ) { 
       $('#halloffame').empty(); 
        $(data).find(".partner_body").appendTo("#halloffame");

   });

This lets me open hyper links in the div "halloffame". But it doesn't control the links in the pages - even if I use the same code on the master page:

<a data-target="#halloffame" href="pages/returns/">

If anyone can point me to where I'm going wrong, I would appreciate it :)

Have an awesome Friday, folks!

Community
  • 1
  • 1
Dan Hawkins
  • 177
  • 12

1 Answers1

0

Your event listener is bound the the currently existing DOM, when you add new elements(from your ajax call) you need to either bind your event listener to the new elements aswell or use deferred event handling(eg jQuerys on).

See this answer for more details

Community
  • 1
  • 1
LJᛃ
  • 7,655
  • 2
  • 24
  • 35