-4

When i load html content by using ajax, the jquery events on loaded html is not work.

For Example-

I have a jquery function-

$('.test').on('click', function(){
  alert('hi');
});

ajax response : 

<div>
  <p class="text">test data</p>
</div>

Now clicking on ajax loaded data is not firing jquery On click event as i defined.

Gautam Rai
  • 2,445
  • 2
  • 21
  • 31
  • `'test' !== 'text'`? – Aluan Haddad Jul 10 '17 at 13:32
  • The event handler is only bound to elements that existed in the document at the time `$('.test').on('click', function(){` gets executed. Go read up on _event delegation_ for an easy way to deal with this. – CBroe Jul 10 '17 at 13:33

1 Answers1

0

please try it, hope it helps

$(document).ready(function() { 
   $.get(url, {}, function(response) {
     $('#ajax-loadedData').html(response); 
     bindEventOnLoadedData();
  });
}); 

function bindEventOnLoadedData() {
   $('.test').on('click', function(){
    alert('hi');
   });
}