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

时间:2017-10-07 18:53:39

标签: javascript jquery self-invoking-function

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

3 个答案:

答案 0 :(得分:4)

IIFE内,this指的是另一个上下文。每个函数都有自己的上下文。您可以使用arrow functionexplicitly 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>

答案 1 :(得分: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)
})();

答案 2 :(得分:-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>