如果用户点击表格中的单元格，我试图显示表格并导致某些操作发生。我的Javascript（使用jquery-3.1.1.min）看起来像这样：
<ol></ol>我发现如果我使用版本1来设置回调，那么如果我点击一个单元格，则警告框会显示正确的密钥。但是，如果我使用版本2，则警告框会显示＆＃34;密钥：未定义＆＃34;。
发生了什么，以及为什么它会对我使用的回调产生影响？
[假设我需要版本2，因为我想将一些本地数据传递给处理程序，我可以通过将 $(function() {
function tdHeader(key) {
return '<td class="mytable-cell" data-key="' + key + '">';
}
function clickHandler() {
alert("Key: " + $(this).data("key"));
}
function displayTable() {
var tabHTML = '<table class="mmmtab">';
tabHTML += '<tr><th>Data1</th><th>Data2</th><th>Data3</th></tr>';
for (var i = 0; i < 3; i++) {
tabHTML += '<tr>';
for (var j = 0; j < 3; j++) {
key = i + "-" + j;
tabHTML += tdHeader(key) + ((i + 1) * (j + 1)) + '</td>';
}
tabHTML += '</tr>';
}
tabHTML += '</table>';
$("#mytable").html(tabHTML);
$(".mytable-cell").click(clickHandler); // Version 1
// $(".mytable-cell").click(function() {clickHandler();}); // Version 2
}
displayTable();
});
作为参数传递给处理程序来解决我的问题。但我仍然想知道为什么要这样做。]
答案 0 :(得分：4)
jQuery调用您在事件所属元素的上下文中传递给click的回调。因此，对于$(".mytable-cell").click(clickHandler);，clickHandler在给定DOM元素的上下文中被调用。
对于$(".mytable-cell").click(function() {clickHandler();});，在DOM元素的上下文中调用匿名函数，在此内部，您在clickHandler或全局对象的上下文中调用undefined。
如果您希望行为相同，则需要编写$(".mytable-cell").click(function() { return clickHandler.apply(this, arguments); } );。
答案 1 :(得分：2)
jQuery .on会自动为您的事件回调更改“this”。 在版本1中，clickHandler中的“this”将为$（“。mytable-cell”）。 但在版本2中，'this'是窗口。 （因为您的事件回调调用clickHandler，clickHandler会创建一个新的上下文）
请尝试：
$(".mytable-cell").click(function() {clickHandler.bind(this)();});