点击按钮时jQuery封装的news函数报错，未封装则正常，求解答

嘿，这个问题其实是JavaScript作用域在搞鬼！咱们一步步拆解清楚：

1. 直接定义函数为啥正常？ #

当你直接写：

function news(){
  console.log('news is going');
}

这个news函数是定义在全局作用域里的——也就是说，整个页面的所有代码（包括按钮的onclick属性）都能访问到它。按钮点击时，浏览器会在全局作用域里查找news函数，自然能顺利找到并执行。

2. 用jQuery包裹后为啥报错？ #

你把news函数放在了$(function(){ ... })内部：

$(function () {
  function news(){
    console.log('news is going');
  }
})

这里的$(function(){...})是jQuery的DOM就绪回调函数，它本质上是一个匿名函数。而你在这个匿名函数内部定义的news，属于这个匿名函数的局部作用域——全局作用域根本无法访问到局部作用域里的函数。所以按钮点击时，浏览器在全局找不到news，就会抛出Uncaught ReferenceError错误。

几种可行的解决办法 #

办法一：把函数挂载到全局对象上 #

如果一定要保留onclick属性的写法，可以把news函数绑定到window（全局对象）上，让全局作用域能访问到它：

$(function () {
  window.news = function(){
    console.log('news is going');
  }
})

办法二：改用jQuery绑定事件（更推荐） #

既然用了jQuery，更符合它设计思路的写法是直接给按钮绑定点击事件，不用依赖全局作用域：

$(function () {
  $('button[name="news_name"]').click(function(){
    console.log('news is going');
  });
})

这样函数可以保持在局部作用域内，既避免了污染全局变量，也不会出现找不到函数的问题。

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