在.on()回调中提取命名函数时正确绑定了$(this)

Question

我有一个这样的代码片段，一切都很好:

jQuery(document).ready(function ($) {
$(document)
.on('click', '[selector]', function(e) {
const paramAttr = $(this).attr('data-set-param')
$(this).addClass('some-class').attr('checked', true)
...
})
})

我想添加另一个事件处理程序，但重用初始回调，所以我开始提取它到一个函数，像这样:

jQuery(document).ready(function ($) {
$(document)
.on('click', '[selector]', setClickHandler)
function setClickHandler(event) {
const paramAttr = $(this).attr('data-set-param')
$(this).addClass('some-class').attr('checked', true)
...
}
})

我测试了上面的，一切仍然工作。现在，我添加另一个事件处理程序:

jQuery(document).ready(function ($) {
$(document)
.on('click', '[selector]', setClickHandler)
.on('keypress', '[selector]', function(e) {
if (e.keyCode === 13) {
setClickHandler(e)
}
})
function setClickHandler(event) {
const paramAttr = $(this).attr('data-set-param')
$(this).addClass('some-class').attr('checked', true)
...
}
})

此时，在按enter键时，在访问$(this)变量的内容时会出现错误。如何进行正确的绑定或调用，以便在函数调用中正确访问$(this)?

Answer 1

在调用函数时使用.call()传递this上下文

jQuery(document).ready(function ($) {
$(document)
.on('click', '[selector]', setClickHandler)
.on('keypress', '[selector]', function(e) {
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)
...
}
})