jQuery中onDropdownShown事件内keyCode弹出undefined问题求助

嘿，我一眼就发现问题所在啦！你遇到的keyCode始终弹出undefined的问题，根源在于事件对象的误用，还有个隐藏的重复绑定小坑。

问题分析 #

1. 事件对象用错了：在onDropdownShown回调里，你给.multiselect-search绑定keyup事件时，直接用了外层onDropdownShown的event参数——这个是下拉框显示的触发事件，根本没有keyCode属性！真正的键盘事件对象应该是keyup回调自己接收的参数，你却没用到它。
2. 重复绑定事件：每次下拉框显示时你都会绑定一次keyup事件，多次打开下拉后，同一个输入框会绑定多个重复事件，触发时会执行N次，这也会导致奇怪的行为。

修复后的代码 #

这里给你两种靠谱的修复方案，任选其一即可：

方案1：修正事件对象 + 避免重复绑定

$('.newmultiselect').multiselect({
    enableFiltering: true,
    filterPlaceholder: 'Search',
    enableCaseInsensitiveFiltering : true,
    includeSelectAllOption: false,
    onChange: function(element, checked) {
        var selectID = $(element).parent().attr('id');
        $("#"+selectID).valid();
    },
    onDropdownShown : function() {
        // 先解绑已有的keyup事件，再绑定新的，避免重复绑定
        const $searchInput = $('.newmultiselect').parent().find(".multiselect-search");
        $searchInput.off('keyup').on('keyup', function(keyboardEvent){
            // 这里用keyboardEvent，它才是键盘事件的真实对象
            if (keyboardEvent.keyCode == 9 || keyboardEvent.keyCode == 13) {
                alert('0000');
            }
            alert(keyboardEvent.keyCode);
            $('.multiselect-filter-hidden').focus();
        });
    }
});

方案2：事件委托（更推荐，逻辑更简洁）

直接在初始化时绑定一次事件委托，不用每次下拉显示都重复绑定：

// 先初始化multiselect
$('.newmultiselect').multiselect({
    enableFiltering: true,
    filterPlaceholder: 'Search',
    enableCaseInsensitiveFiltering : true,
    includeSelectAllOption: false,
    onChange: function(element, checked) {
        var selectID = $(element).parent().attr('id');
        $("#"+selectID).valid();
    }
});

// 用事件委托绑定keyup事件，只需要绑定一次
$(document).on('keyup', '.newmultiselect .multiselect-search', function(keyboardEvent){
    if (keyboardEvent.keyCode == 9 || keyboardEvent.keyCode == 13) {
        alert('0000');
    }
    alert(keyboardEvent.keyCode);
    $('.multiselect-filter-hidden').focus();
});

额外小建议 #

现在keyCode已经是废弃API了，更推荐使用语义化的key属性来判断按键，兼容性更好：

// 替代keyCode == 9（Tab键）和keyCode ==13（Enter键）
if (keyboardEvent.key === 'Tab' || keyboardEvent.key === 'Enter') {
    alert('0000');
}

内容的提问来源于stack exchange，提问作者Siva Ganesh