0

I use the following code through out my application to create hyper links that load pages into a DIV element

$(".OpenInContent").click(function () {

linkObj = $(this);
var viewUrl = linkObj.attr('href');
$('#ActiveContent').empty();
$('#ActiveContent').load(viewUrl);
return false;

});

So for example lets say i have a page called "main.html" with the following html. (the above javascript is at the bottom of this page)

<a class="OpenInContent" href="test.html"> 
<div id="ActiveContent" style="display: block;"></div>

This loads the contents of test.html into the DIV with ID ActiveContent.

But what if the content of test.html also contained a hyper link with the "OpenInContent" class?

The only way i can get this to work is to put the same Javascript on the bottom of the test.html page.

What is the best method to accomplish this? I am assuming loading the same javascript code twice is not it!

user1287453
  • 279
  • 4
  • 15

1 Answers1

1

Using delegation with .on() is the way to target dynamic elements.

$(document).on('click', '.OpenInContent', function () {
    //do stuff
});
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
tymeJV
  • 103,943
  • 14
  • 161
  • 157