4

在 jQuery 事件中定义的自调用函数不起作用,但为什么呢?

$('div').on('click', function(){
  $('div').text($('div').text() + 1)
  (function(){
    $('div').text($('div').text() + 0)
  })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>text</div>

编辑: 下面的答案集中在this关键字上,所以我将this参数更改为'div'. 它仍然不起作用。

4

3 回答 3

4

在里面,指IIFEthis是另一个上下文。每个函数都有自己的上下文。您可以使用箭头函数显式绑定上下文,或者只保留this对另一个变量的引用并使用它。还有一件事,你错过了放在;第一条语句之后,这会导致错误。

也不要在该代码中使用这种样式$('div'),这将找到所有 div,但会获得第一个的文本,所以你做的工作比它需要的要多。

箭头函数

$('div').on('click', function() {
    $(this).text($(this).text() + 1);
    (() => {
      $(this).text($(this).text() + 0)
    })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

上下文的显式绑定

$('div').on('click', function(){
    $(this).text($(this).text() + 1);
    (function() {
        $(this).text($(this).text() + 0)
    }).bind(this)();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

将引用保存到另一个变量中

$('div').on('click', function(){
    const that = this;
    $(that).text($(that).text() + 1);
    (function(){
      	$(that).text($(that).text() + 0)
    })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

于 2017-10-07T18:54:43.390 回答
2

你的问题是你错过了;最后$('div').text($('div').text() + 1)

没有;它就像你写的一样:

$('div').text($('div').text() + 1)(function(){
   $('div').text($('div').text() + 0)
})();

但是因为text($('div').text() + 1)不返回函数,你会得到这个错误。

未捕获的类型错误:$(...).text(...) 不是函数

这是您必须使用;来结束语句的一种情况。

ecma-262:11.9.2 自动分号插入示例

来源

a = b + c
(d + e).print()

不会通过自动分号插入进行转换,因为从第二行开始的带括号的表达式可以解释为函数调用的参数列表:

a = b + c(d + e).print()

所以你必须写:

$('div').text($('div').text() + 1);
(function(){
   $('div').text($('div').text() + 0)
})();
于 2017-10-07T19:14:00.610 回答
-2

$(document).ready(function(){
$('div').on('click', function(){
	$(this).text($(this).text() + 1);
    var divelement = $(this);
	(function(element){
  	element.text($(element).text() + 0);
  })(divelement);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>text</div>

于 2017-10-07T19:00:42.823 回答