带有上下文传递的 jQuery 选择器

Question

我正在编写 jQuery 教程，但有些东西我不太明白为什么。以下是我从教程中剪下的部分。黑体字是我不明白的部分，希望有高手给我解释一下。非常感谢!

“通过 Ajax 加载内容时遇到的一个非常常见的问题是:当向文档添加也应应用于加载的内容的事件处理程序时，您必须在加载内容后应用这些处理程序。为了防止代码重复，您可以委托(delegate)给一个函数。示例:

 function addClickHandlers() {
   $("a.remote", this).click(function() {
     $("#target").load(this.href, addClickHandlers);
   });
 }

$(文档).ready(addClickHandlers);现在，当 DOM 准备就绪时，addClickHandlers 会被调用一次，然后每次用户单击带有远程类的链接并且内容已完成加载时，都会调用一次。

请注意 $("a.remote", this) 查询，它作为上下文传递:对于文档就绪事件，this 引用文档，因此它会在整个文档中搜索具有远程类的 anchor 。 当 addClickHandlers 用作 load() 的回调时，它引用不同的元素:在示例中，是具有 id target 的元素。这可以防止将 click 事件一次又一次应用到同一元素链接，最终导致崩溃。”

Answer 1

function addClickHandlers() {
    // this is window
    $("a.remote", this).click(function() {
        // this is a <a class="remote">
        $("#target").load(this.href, addClickHandlers);
    });
}

一般来说，函数中的 this 上下文是 window，除非使用 new 关键字调用或者以 obj 形式调用.method()(在这种情况下它是 obj)。

因为调用函数 addClickHandlers() 实际上调用了 window.addClickHandlers()，这意味着 this 值的范围为 窗口。

jQuery 本身会将 this 范围限定为您在回调函数中使用的元素。

在 .click(function() { ... }) 中，this 将引用被单击的对象。