Question

我写了一个非常基本的jQuery插件，它应该记录点击按钮的值。

虽然它基本上有效，但遗憾的是它为页面上的每个按钮记录了相同的值。因此，如果页面上有三个按钮，则单击按钮的值将被记录三次。

插件代码如下所示：

(function($) {

  $.fn.content = function() {
    return this.each(function() {
      $('button').click(function() {
        console.log($(this).html());
      });
    });
  };

}(jQuery));


$('button').content();

Fiddle

虽然我现在很困惑，但我很确定它与this循环中each的上下文有关，但我无法弄明白。< / p>

Answer 1

这里有几个问题。 this函数内部的fn.content实际上是组合的jQuery对象。该对象为$('button')，因此它将包含当时DOM中有多少按钮。

然后迭代该集合，对于该集合中的每个项目，再次将单击处理程序再次附加到$('button')组。不幸的是，这意味着您已经为该组分配了一个单击事件处理程序n次，其中n是有多少个按钮。 3个按钮，3个活动; 6个按钮，6个活动。

为了不这样做，只需将click处理程序分配给原始jQuery对象。

(function($) {

    $.fn.content = function() {
        return this.click(function() {
            console.log($(this).html());
        });
    });

}(jQuery));

请注意，click会在内部致电.each，我们示例中的this已经$('button')。

有关创建jQuery插件的更多信息，请参阅 the utility of jQuery.fn

上的帖子

Answer 2

我不确定您实际需要访问哪个范围，但this的范围对于每个函数都是不同的，包括您创建的匿名函数。要访问外部作用域的this，请尝试以下操作：

function foo() {
    this.someVal = 1;
    var that = this;
    function bar() {
        console.log(that.someVal); // you have access to foo's this
    } 
}

jQuery插件：意外的行为 - “this”的上下文可能已丢失

2 个答案: