jQuery .on()回调提取为命名函数时$(this)的正确绑定方法

问题根因 #

你直接在keypress的匿名回调里调用setClickHandler(e)时，函数的this指向丢失了：

• jQuery事件绑定的回调函数中，this默认指向触发事件的目标DOM元素
• 普通函数独立调用时，非严格模式下this指向全局window对象，严格模式下为undefined，自然无法读取DOM元素的属性，就会报错。

解决方法 #

有两种最常用的方案可选：

方案1：用call/apply手动绑定this指向 #

调用setClickHandler时，把当前事件回调的this（也就是触发keypress的DOM元素）手动绑定为函数执行上下文：

if (e.keyCode === 13) {
    // call的第一个参数就是函数执行时的this指向，后面依次传参
    setClickHandler.call(this, e)
}

方案2：直接触发click事件复用逻辑 #

不需要手动调用回调函数，直接触发目标元素的click事件，jQuery会自动处理this指向，逻辑和用户主动点击完全一致：

if (e.keyCode === 13) {
    $(this).trigger('click')
}

修正后完整代码（以方案1为例） #

jQuery(document).ready(function ($) {
    $(document)
        .on('click', '[selector]', setClickHandler)
        .on('keypress', '[selector]', function(e) {
            // 可选优化：keyCode已被标准弃用，可替换为e.key === 'Enter'兼容性更好
            if (e.keyCode === 13) {
                setClickHandler.call(this, e)
            }
        })

    function setClickHandler(event) {
        const paramAttr = $(this).attr('data-set-param')
        $(this).addClass('some-class').attr('checked', true)
        // ...原有逻辑
    }
})

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