0

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?

James Wadsworth
  • 23
  • 4
  • 1
    Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – VLAZ Sep 26 '19 at 07:31
  • Already read the thread but not useful because all solutions involved a user action on the page such as a click. – James Wadsworth Oct 01 '19 at 16:20

1 Answers1

0

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.

James Wadsworth
  • 23
  • 4