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'
。它仍然无效。
答案 0 :(得分:4)
在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>
答案 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>