如何在点击元素时撤销外部函数？为何点击后文本未更改？

先来看你写的代码：

JavaScript 代码 #

$(function(){ // ready function
  myfunc($el){
    $el.text("You clicked ..!");
  }
  $("div").click(myfunc($(this)));
})

CSS 代码 #

div{
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
  text-align: center;
}
div:hover{
  background-color: #f1f1f1;
}

HTML 代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click Here</div>

问题出在哪？ #

你绑定点击事件的这一行$("div").click(myfunc($(this)));是关键错误：

• 你直接调用了myfunc($(this))，而不是把函数本身作为点击事件的回调函数。这意味着页面加载完成（ready函数执行）的时候，myfunc就立刻运行了，而不是等到你点击div的时候才触发。
• 另外，这里的$(this)在ready函数里指向的是document对象，不是你要点击的div，所以第一次执行myfunc的时候，其实是在修改document的文本，你根本看不到这个变化；而真正点击div的时候，因为没有绑定有效的回调函数，所以完全没反应。

怎么修复？ #

有两种简单的修复方式，看你需求选：

方式一：直接绑定函数，利用this获取当前元素

把函数本身传给click方法，jQuery会在点击时自动把当前点击的元素作为this传入函数：

$(function(){ 
  function myfunc(){ 
    // 这里的this就是被点击的div元素
    $(this).text("You clicked ..!"); 
  } 
  // 直接传函数名，不要加括号调用
  $("div").click(myfunc); 
})

方式二：用匿名函数包裹，传递自定义参数

如果你需要给myfunc传递特定参数，可以用匿名函数作为回调，在里面调用myfunc并传入元素：

$(function(){ 
  function myfunc($el){ 
    $el.text("You clicked ..!"); 
  } 
  $("div").click(function(){
    // 这里的this是被点击的div，转成jQuery对象传给myfunc
    myfunc($(this));
  }); 
})

这样修改之后，点击div的时候就能正常触发函数，把文本改成"You clicked ..!"啦！

内容的提问来源于stack exchange，提问作者Martin AJ