Question

在Wordpress网站上，我使用的是谷歌CDN的jQuery 3.1.0和jQuery UI 1.11.4：

function my_enqueue_scripts() 
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_deregister_script ( 'jquery' );
    wp_deregister_script ( 'jquery-ui' );
    wp_deregister_script ( 'jquery-migrate' );

    wp_enqueue_style( 'jquery-ui-smoothness', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css' );
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js' );
    wp_enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js' );
    wp_enqueue_script( 'pixi-script', '//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js' );
    wp_enqueue_script( 'utils-script', '/words/Utils.js' );
    wp_enqueue_script( 'small-tile-script', '/words/SmallTile.js' );
    wp_enqueue_script( 'big-tile-script', '/words/BigTile.js' );
    wp_enqueue_script( 'words-script', '/words/Words.js' );
}

当我创建jQuery UI selectmenu然后使用以下测试代码尝试refresh时 -

HTML：

<select id="gamesMenu">

JavaScript的：

"use strict";

jQuery(document).ready(function($) {

    console.log('selectmenu 1');
    $('#gamesMenu').selectmenu({ disabled: true });
    console.log('selectmenu 2');
    $('#gamesMenu').selectmenu('refresh');          // THIS CRASHES
    console.log('selectmenu 3');
});

然后很遗憾它失败了：

jQuery.Deferred exception: Cannot read property 'eq' of undefined TypeError: Cannot read property 'eq' of undefined
    at _getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12513:24)
    at ._getSelectedItem (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:12362:40)
    at .refresh (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:415:25)
    at HTMLSelectElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:508:39)
    at Function.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:368:19)
    at jQuery.each (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:157:17)
    at jQuery.$.fn.(anonymous function) [as selectmenu] (http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js?ver=4.5.3:494:9)
    at HTMLDocument.<anonymous> (http://slova.de/words/Words.js?ver=4.5.3:400:25)
    at mightThrow (http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js?ver=4.5.3:3508:29) undefined

其中涉及1.11.4/jquery-ui.js中的以下代码：

_getSelectedItem: function() {
    return this.menuItems.eq( this.element[ 0 ].selectedIndex );
},

此处适用于Mac的Google Chrome浏览器中的屏幕截图：

如何修复或解决这个问题？

为了在我的真实JavaScript代码中提供更多上下文，我通过WebSocket连接反复获取JSON数据，并且必须更新HTML选择菜单（从而调用selectmenu('refresh')：

function updateMenu() {
        var yourGroup = ['<optgroup label="YOUR TURN">'];
        var hisGroup = ['<optgroup label="HIS TURN">'];

        for (var game in games) {
                var myturn = (game.played1 < game.played2);
                if (myturn) {
                         yourGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                } else {
                        hisGroup.push(
                                '<option value="' +
                                game.gid +
                                '">Game #' +
                                game.gid +
                                '</option>'
                        );
                }
        }

        yourGroup.push('</optgroup>');
        hisGroup.push('</optgroup>');

        $('#gamesMenu')
                .empty()
                .append(yourGroup.length > 2 ? yourGroup.join('') : '')
                .append(hisGroup.length > 2 ? hisGroup.join('') : '')
                .selectmenu('refresh')     // THIS CRASHES
                .selectmenu('option', 'disabled', 
                    yourGroup.length <= 2 && hisGroup.length <= 2);
}

$('#gamesMenu').selectmenu({ 
    disabled: true });
    select: function(e, ui) {
            updateButtons();
            updateBoard();
});

Answer 1

好吧，好像是jQuery bug #10662。

在没有其他选项的情况下，我通过添加<option>No games found</option>并禁用选择菜单来解决这个问题：

var noGames = (yourGroup.length <= 2 && hisGroup.length <= 2);
$('#gamesMenu')
        .empty()
        .append(yourGroup.length > 2 ? yourGroup.join('') : '')
        .append(hisGroup.length > 2 ? hisGroup.join('') : '')
        .append(noGames ? '<option>No games found</option>' : '')
        .selectmenu('refresh')
        .selectmenu('option', 'disabled', noGames);

我想另一种解决方法是在本地下载1.11.4/jquery-ui.js并添加支票：

if ( !this.menuItems || this.menuItems.length == 0) {

或等待1.12.x版本。

selectmenu（'refresh'）因“Uncaught TypeError”而崩溃

1 个答案: