jQuery-UI - 「無法讀取未定義的屬性」步驟「

Question

我們最近將jQuery從版本2.2.4升級到3.1.1，現在正在看到一些有趣的錯誤。我安裝了jquery-migrate插件，它幫助我解決了一些錯誤，但不是全部。下面是我在Chrome瀏覽器的開發者控制檯中看到的錯誤，我似乎無法指出發生此錯誤的位置。

jquery-ui-1.12.1.js:1951 Uncaught TypeError: Cannot read property 'step' of undefined 
    at String.<anonymous> (jquery-ui-1.12.1.js:1951) 
    at each (jquery-3.1.1.slim.js:368) 
    at Function.color.hook (jquery-ui-1.12.1.js:1913) 
    at jquery-ui-1.12.1.js:1963 
    at jquery-ui-1.12.1.js:2005 
    at jquery-ui-1.12.1.js:14 
    at jquery-ui-1.12.1.js:16 

我已經調試在Chrome和它打破了一個名爲jQuery.fx.step[ hook ]函數中。當我懸停在jQuery.fx上時，它顯示爲未定義。看下面

jQuery.fx.step[ hook ] = function(fx) { 
      if (!fx.colorInit) { 
       fx.start = color(fx.elem, hook); 
       fx.end = color(fx.end); 
       fx.colorInit = true; 
      } 

我已經卸載jquery-ui，但所做的只是打破了Angular。如果有人能夠對此事發表看法，會很感激。

packages.config =

<package id="Angular.Material" version="1.1.4" targetFramework="net462" /> 
    <package id="Angular.UI.Bootstrap" version="2.5.0" targetFramework="net462" /> 
    <package id="angular-file-upload" version="12.2.13" targetFramework="net462" /> 
    <package id="AngularJS.Animate" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Aria" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Core" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Messages" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Resource" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Route" version="1.6.5" targetFramework="net462" /> 
    <package id="AngularJS.Sanitize" version="1.6.5" targetFramework="net462" /> 
    <package id="Antlr" version="3.5.0.2" targetFramework="net462" /> 
    <package id="Bootbox.JS" version="4.4.0" targetFramework="net462" /> 
    <package id="bootstrap" version="3.3.7" targetFramework="net462" /> 
    <package id="CommonServiceLocator" version="1.3" targetFramework="net462" /> 
    <package id="EntityFramework" version="6.1.3" targetFramework="net462" /> 
    <package id="font-awesome" version="4.7.0" targetFramework="net462" /> 
    <package id="HubSpot.Tether" version="1.1.1" targetFramework="net462" /> 
    <package id="jQuery" version="3.1.1" targetFramework="net462" /> 
    <package id="jQuery.UI.Combined" version="1.12.1" targetFramework="net462" /> 
    <package id="lodash" version="4.17.4" targetFramework="net462" /> 

Answer 1

基於它看起來像你使用jQuery斯利姆（從at each (jquery-3.1.1.slim.js:368)）的錯誤信息。 Slim顯然刪除了jQuery UI中所需的一些功能。要解決這個問題，請使用完整版本的jQuery。

這裏有一個演示覆制您的問題：

$(function() { 
 
    // run the currently selected effect 
 
    function runEffect() { 
 
     // get effect type from 
 
     var selectedEffect = $("#effectTypes").val(); 
 
    
 
     // Most effect types need no options passed by default 
 
     var options = {}; 
 
     // some effects have required parameters 
 
     if (selectedEffect === "scale") { 
 
     options = { percent: 50 }; 
 
     } else if (selectedEffect === "transfer") { 
 
     options = { to: "#button", className: "ui-effects-transfer" }; 
 
     } else if (selectedEffect === "size") { 
 
     options = { to: { width: 200, height: 60 } }; 
 
     } 
 
    
 
     // Run the effect 
 
     $("#effect").effect(selectedEffect, options, 500, callback); 
 
    }; 
 
    
 
    // Callback function to bring a hidden box back 
 
    function callback() { 
 
     setTimeout(function() { 
 
     $("#effect").removeAttr("style").hide().fadeIn(); 
 
     }, 1000); 
 
    }; 
 
    
 
    // Set effect from select menu value 
 
    $("#button").on("click", function() { 
 
     runEffect(); 
 
     return false; 
 
    }); 
 
    });

.toggler { width: 500px; height: 200px; position: relative; } 
 
    #button { padding: .5em 1em; text-decoration: none; } 
 
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; } 
 
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; } 
 
    .ui-effects-transfer { border: 2px dotted gray; }

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div class="toggler"> 
 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
 
    <h3 class="ui-widget-header ui-corner-all">Effect</h3> 
 
    <p> 
 
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
 
    </p> 
 
    </div> 
 
</div> 
 
    
 
<select name="effects" id="effectTypes"> 
 
    <option value="blind">Blind</option> 
 
    <option value="bounce">Bounce</option> 
 
    <option value="clip">Clip</option> 
 
    <option value="drop">Drop</option> 
 
    <option value="explode">Explode</option> 
 
    <option value="fade">Fade</option> 
 
    <option value="fold">Fold</option> 
 
    <option value="highlight">Highlight</option> 
 
    <option value="puff">Puff</option> 
 
    <option value="pulsate">Pulsate</option> 
 
    <option value="scale">Scale</option> 
 
    <option value="shake">Shake</option> 
 
    <option value="size">Size</option> 
 
    <option value="slide">Slide</option> 
 
    <option value="transfer">Transfer</option> 
 
</select> 
 
    
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

這裏，它是全jQuery的：

$(function() { 
 
    // run the currently selected effect 
 
    function runEffect() { 
 
     // get effect type from 
 
     var selectedEffect = $("#effectTypes").val(); 
 
    
 
     // Most effect types need no options passed by default 
 
     var options = {}; 
 
     // some effects have required parameters 
 
     if (selectedEffect === "scale") { 
 
     options = { percent: 50 }; 
 
     } else if (selectedEffect === "transfer") { 
 
     options = { to: "#button", className: "ui-effects-transfer" }; 
 
     } else if (selectedEffect === "size") { 
 
     options = { to: { width: 200, height: 60 } }; 
 
     } 
 
    
 
     // Run the effect 
 
     $("#effect").effect(selectedEffect, options, 500, callback); 
 
    }; 
 
    
 
    // Callback function to bring a hidden box back 
 
    function callback() { 
 
     setTimeout(function() { 
 
     $("#effect").removeAttr("style").hide().fadeIn(); 
 
     }, 1000); 
 
    }; 
 
    
 
    // Set effect from select menu value 
 
    $("#button").on("click", function() { 
 
     runEffect(); 
 
     return false; 
 
    }); 
 
    });

.toggler { width: 500px; height: 200px; position: relative; } 
 
    #button { padding: .5em 1em; text-decoration: none; } 
 
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; } 
 
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; } 
 
    .ui-effects-transfer { border: 2px dotted gray; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div class="toggler"> 
 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
 
    <h3 class="ui-widget-header ui-corner-all">Effect</h3> 
 
    <p> 
 
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
 
    </p> 
 
    </div> 
 
</div> 
 
    
 
<select name="effects" id="effectTypes"> 
 
    <option value="blind">Blind</option> 
 
    <option value="bounce">Bounce</option> 
 
    <option value="clip">Clip</option> 
 
    <option value="drop">Drop</option> 
 
    <option value="explode">Explode</option> 
 
    <option value="fade">Fade</option> 
 
    <option value="fold">Fold</option> 
 
    <option value="highlight">Highlight</option> 
 
    <option value="puff">Puff</option> 
 
    <option value="pulsate">Pulsate</option> 
 
    <option value="scale">Scale</option> 
 
    <option value="shake">Shake</option> 
 
    <option value="size">Size</option> 
 
    <option value="slide">Slide</option> 
 
    <option value="transfer">Transfer</option> 
 
</select> 
 
    
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>