Question

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'。它仍然无效。

Answer 1

在IIFE内，this指的是另一个上下文。每个函数都有自己的上下文。您可以使用arrow function，explicitly binding of the context或仅将this引用保存到另一个变量中并使用它。还有一件事，你错过了在第一个语句之后放置;，这将导致错误。

也不要在代码$('div')中使用此样式，这将找到所有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>

Answer 2

您的问题是在;

结束时错过了$('div').text($('div').text() + 1)

没有;，就像你写的那样：

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

但由于text($('div').text() + 1)没有返回函数，因此会出现此错误。

未捕获的TypeError：$（...）。text（...）不是函数

在这种情况下，您必须使用;来结束陈述。

ecma-262: 11.9.2 Examples of Automatic Semicolon Insertion

来源
a = b + c
(d + e).print()
不会通过自动分号插入进行转换，因为括号括起来了从第二行开始的表达式可以解释为参数列表用于函数调用：
a = b + c(d + e).print()

所以你必须写：

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

Answer 3

$(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>

jQuery事件中的自调用函数不起作用

3 个答案: