jQuery中this作为选择器的作用域问题求助

嘿，这个问题我之前踩过同款坑，核心就是**this的指向在不同上下文里完全不一样**，咱们把两种情况拆开说就明明白白了：

为什么$("td").click(...)能正常工作？ #

当你写这段代码时：

$("td").click(function(){ alert($(this).attr("id")); })

• 首先$("td")已经精准选中了页面上所有的<td>元素，接着给每个<td>绑定了点击事件。
• 在jQuery的事件回调函数里，this默认指向触发事件的那个DOM元素——也就是你点击的具体某一个<td>。所以$(this)是把这个DOM元素包装成jQuery对象，再调用.attr("id")自然能拿到它的唯一ID。

为什么$(this).click(...)会返回undefined？ #

再看这段出问题的代码：

$(this).click(function(){ alert($(this).attr("id")); })

这里的问题全出在第一个this的指向上：

• 如果这段代码是直接写在全局<script>标签里（没包裹在任何函数中），浏览器环境下的this会指向window对象。那$(this)就等同于$(window)，你是给window绑定了点击事件。当你点击<td>时，触发的其实是window的点击事件，回调里的this还是window——而window根本没有id属性，所以返回undefined。
• 如果这段代码是写在$(document).ready(function(){ ... })这类函数里，外层的this指向的是document对象，$(this)就是$(document)，给document绑定点击事件后，回调里的this依然是document，同样没有id属性，结果还是undefined。

总结 #

你要绑定点击事件的目标是<td>元素，必须先通过$("td")选中它们，而不是用$(this)——因为这个this根本不是你想要的<td>，而是当前代码上下文里的其他对象（比如window、document）。

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