How to use .mouseenter and .mouseleave(function() in ajax loaded content?

Question

I have a jquery code in my articles, and this works fine on my first pages, but I use ajax pagination, and in the ajax loaded articles I get blank <script></script> ...

I find that, the solution for this, I need use the .on() function (also would work the .live() with jQuery 1.4.3- or the .delegate() with jQuery 1.7-), but I very beginner in javascript, and I dont know, how can use correctly the .on() in my code. I try multifarious combinations, but my script absolute not firing or also not firing after the ajax calls...

Here is my full jquery code (I use jQuery 2.1.0 in this code, but I can use also 3.3.1 with .noConflict(true)):

 var $hidedcontent = $("#hided-content");

 $("#activator-field, #hided-content").mouseleave(function(){
      $hidedcontent.hide( "slow", function() {
      });
 });

 var timer;
 $( "#activator-field" ).mouseenter(function() {
      var that = this;

 timer = setTimeout(function(){
      $hidedcontent.show( "slow", function() {
      });
 }, 500);

 }).mouseleave(function() {
      clearTimeout(timer);
 });

How can I put to this code the .on() function?

The linked question dont solution for my problem.

I in vain I use it .on(), not working after ajax calls... Here this simple test code, also not working!:

 jQuery(document).ready(function() {
         jQuery('#activator-field').on('click', function() {
           alert('test');
         });
 });

If these codes are in ajax loaded content, I get blank <script></script> ... Maybe better solution for me, if I include my ajax pagination that, calls scripts? How can I do this?