javascript – jQuery.hoverDelay.js Plugin no detecta nuevos elementos añadidos

Estoy usando jQuery.hoverDelay.js plugin para retrasar el hover, funciona pero cuando añado nuevos elementos no los detecta.

El ejemplo desde su pagina es sencillo:

HTML

<ul id="demo-menu">
  <li class="menu-item" style="">Lorem</li>
  <li class="menu-item">Ipsum</li>
  <li class="menu-item">Dolor</li>
  <li class="menu-item">Sit</li>
  <li class="menu-item" style="">Amet</li>
</ul>

jQuery:

$('#demo-menu li').hoverDelay({
  delayIn: 200,
  delayOut:700,
  handlerIn: function($element){
      $element.css({backgroundColor: 'red'});  
  },
  handlerOut: function($element){
      $element.css({backgroundColor: 'auto'});  
  }
}); 

Se que en Jquery se debe usar $(document).on para los nuevos elementos añadidos, pero no entiendo como aplicarlo con la funcion hover de este Plugin.

¿Alguna idea?

$(document).on('click','button',function(e) {
  // Codigo
});

Codigo del plugin de pocas lineas.:

$.fn.hoverDelay = function(options) {
var defaultOptions = {
    delayIn: 300,
    delayOut: 300,
    handlerIn: function(){},
    handlerOut: function(){}
};
options = $.extend(defaultOptions, options);
return this.each(function() {
    var timeoutIn, timeoutOut;
    var $element = $(this);
        $element.hover(
            function() {
            if (timeoutOut){
            clearTimeout(timeoutOut);
            }
            timeoutIn = setTimeout(function(){options.handlerIn($element);}, options.delayIn);
            },
            function() {
            if (timeoutIn){
            clearTimeout(timeoutIn);
            }
            timeoutOut = setTimeout(function(){options.handlerOut($element);}, options.delayOut);
            }
        );
});
};

Página del plugin: http://ronency.github.io/hoverDelay/