为何jsGrid在$(function())中正常，在jQuery(document).ready中报错？

这个报错Uncaught TypeError: Cannot set property '_grid' of undefined本质上是因为回调函数内部的$没有正确指向jQuery对象，导致jsGrid无法挂载到正确的DOM元素上。

问题根源 #

$(function())是jQuery(document).ready(function($) { ... })的语法糖——它会自动把jQuery作为参数传递给回调函数，所以函数内部的$肯定是jQuery的别名，调用$("#jsGrid").jsGrid()时能正确获取jQuery对象，自然能正常初始化网格。

但如果你直接写jQuery(document).ready(function() { ... })，没有在回调函数的参数里声明$，一旦页面中有其他JavaScript库（比如Prototype、MooTools）也使用了$作为全局变量，函数内部的$就会指向那个库，而不是jQuery。这时候调用$().jsGrid()，因为不是jQuery对象，jsGrid无法找到它需要的_grid属性挂载点，就会抛出这个错误。

两种可行的解决方案 #

方案1：在回调函数中传入$作为参数

把回调函数的参数设为$，明确让它指向jQuery：

jQuery(document).ready(function($) {
  // 这里的$就是jQuery的别名，安全使用
  $("#jsGrid").jsGrid({
    // 你的jsGrid配置项
    width: "100%",
    height: "auto",
    // ...其他配置内容
  });
});

方案2：在函数内部使用完整的jQuery代替$

如果不想依赖$别名，直接用jQuery来选择元素和调用方法：

jQuery(document).ready(function() {
  jQuery("#jsGrid").jsGrid({
    // 你的jsGrid配置项
    width: "100%",
    height: "auto",
    // ...其他配置内容
  });
});

快速验证方法 #

你可以在回调函数开头加一行代码：console.log($ === jQuery)，如果输出false，就说明全局的$已经被其他库占用了，这时候就必须用上面的方法来规避冲突。

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