Attach javascript event to content loaded with AJAX

Question

previously I had page that was loaded in the usual way with a list of addresses taken from the database and displayed on the page with a php script. I had on the page a JavaScript code that obfuscated the telephone numbers with the following code.

 <div class="telephoneNumber" data-last="'.$data_last.'" data-first="'.$first_numbers.'"> <span style="cursor:pointer;">'.$data_last.'</span> </div>

 $(document).ready(function(){ $('.telephoneNumber').toggle(function() { $(this).find('span').text(Joomla.JText._('ADVKONTENT_SHOW_TELEPHONE_NUMBER')); },function() { $(this).find('span').text( $(this).data('first') + $(this).data('last') ); }).click(); }

I have change the architecture of the page and we now load the list of addresses using a ajax call and the results injected into the page. The numbers are now not obfuscated.

I have searched for possible solutions but they all seem to involve some user action such as click. Is it possible to rewrite the JavaScript, it does have to be in jquery, so that as the result are loaded into the page we can apply the obfuscate script?

Answer 1

The solution turned out to be remarkably simple. Putting the the code:

$('.telephoneNumber').toggle(function() {
      $(this).find('span').text(Joomla.JText._('ADVKONTENT_SHOW_TELEPHONE_NUMBER'));
},function() {
  $(this).find('span').text( $(this).data('first') + $(this).data('last') );
}).click();

at the end of the HTML that is returned in the AJAX call means the toggle function is add at the right points and the phone numbers are hidden.