如何在ajax加载的内容中使用.mouseenter和.mouseleave（function（）？

Question

我的文章中有一个jquery代码，这在我的第一页上工作正常，但是我使用了ajax分页，并且在加载了ajax的文章中，我得到了空白<script></script> ...

我发现，为此的解决方案，我需要使用.on()函数（也可以在jQuery 1.4.3-上使用.live()或在jQuery 1.7-上使用.delegate()） ，但我是JavaScript的初学者，我不知道如何在我的代码中正确使用.on()。我尝试了多种组合，但是我的脚本绝对不触发，或者在ajax调用后也不触发...

这是我完整的jquery代码（我在此代码中使用jQuery 2.1.0，但我也可以在.noConflict(true)中使用3.3.1）：

 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);
 });

如何将.on()函数添加到此代码中？

链接的问题无法解决我的问题。

我徒劳地使用了.on（），在ajax调用后无法使用...这里的简单测试代码也无法使用！：

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

如果这些代码在ajax加载的内容中，我将得到空白<script></script> ... 如果我包括称为脚本的ajax分页，也许对我来说是更好的解决方案？我该怎么办？