JS работает в браузере, но не на JSFiddle

Question

Привет У меня есть проблема с этим кодом:

$("#col3, #col4").betterMouseover(500, function() { 
    var color; 
    if ($(this).attr('id') == "col3") { color = "#44a0ff"; } 
    else { color = "red"; } 
    $("#better").css({backgroundColor:""+color+""}); 
}); 


(function($) { 
     $.fn.betterMouseover = function (accidentTime, funkcia) { 
      if (accidentTime == undefined || accidentTime == null) { accidentTime = 250; } 
      if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
       funkcia = function() { 
        console.log("no callback action specified for betterMouseover()"); 
       }; 
      } 
      return this.each(function() { 
       var jeOut; 
       $(this).mouseenter(function() { 
        var totok = this; 
        jeOut = false; 
        setTimeout(function(){ 
         if (!jeOut) { $(totok).betterMouseoverHandler(funkcia); } 
        }, accidentTime); 
       }).mouseleave(function() { 
        jeOut = true; 
       }); 
      }); 
     } 
     $.fn.betterMouseoverHandler = function (fx) { 
      fx.call(this); 
     } 
}(jQuery)); 

JSFiddle link

код работает в браузере, но не на JSFiddle. Это маленький jquery-плагин, который мне мален, я получаю сообщение об ошибке в строке 9, говоря что-то объект объекта не имеет метода betterMouseover. Есть ли некоторые ограничения в JSFiddle, поэтому я не могу запускать jquery-плагины?

Answer 1

Проверьте это изменение JSFiddle.

Вы пытаетесь связать новый обработчик событий плагина, прежде чем вы определили обработчик события. Переместить обработчик события в верхней части панели сценария, как так:

Панель сценария:

/* Define New Handler */ 
(function($) { 
    $.fn.betterMouseover = function (accidentTime, funkcia) { 
     if (accidentTime == undefined || accidentTime == null) { 
      accidentTime = 250; 
     } 
     if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { 
      funkcia = function() { 
       console.log("no callback action specified for betterMouseover()"); 
      }; 
     } 
     return this.each(function() { 
      var jeOut; 
      $(this).mouseenter(function() { 
      var totok = this; 
       jeOut = false; 
       setTimeout(function(){ 
        if (!jeOut) { 
         $(totok).betterMouseoverHandler(funkcia); 
        } 
       }, accidentTime); 
      }).mouseleave(function() { 
       jeOut = true; 
      }); 
     }); 
    } 
    $.fn.betterMouseoverHandler = function (fx) { 
     fx.call(this); 
    } 
}(jQuery)); 

/* Bind New Handler */ 
$("#col1, #col2").mouseenter(function() { 
    var color; 
    if ($(this).attr('id') == "col1") { 
     color = "#44a0ff"; 
    } else { 
     color = "red"; 
    } 
    $("#original").css({backgroundColor:""+color+""}); 
}); 


$("#col3, #col4").betterMouseover(500, function() { 
    var color; 
    if ($(this).attr('id') == "col3") { 
     color = "#44a0ff"; 
    } else { 
     color = "red"; 
    } 
    $("#better").css({backgroundColor:""+color+""}); 
});