使用data方法更新文本元素报错：Object doesn't support property or method 'data'求助

首先，这个报错“Object doesn't support property or method 'data'”几乎都是因为你调用data()的对象不是jQuery对象，或者当前环境里jQuery没正确加载。结合你说的两个函数一个正常一个出错，大概率是这两个函数在处理元素时的方式有差异，给你列几个最可能的原因和排查点：

1. 元素获取方式不同 #

你在MealNameError里可能是用jQuery选择器直接选中元素（比如$('#meal-name-error')），但在MealItemError里不小心用了原生JS的方法获取元素（比如document.getElementById()或者querySelector()）——原生DOM元素是没有data()方法的，只有jQuery包装后的对象才有。

举个例子，错误的写法：

// 原生DOM元素，调用data()会报错
const mealItemElem = document.getElementById('meal-item-error');
mealItemElem.data('error-message', '请输入有效内容');

正确的写法是把原生元素转成jQuery对象：

const mealItemElem = document.getElementById('meal-item-error');
$(mealItemElem).data('error-message', '请输入有效内容');
// 或者直接用jQuery选择器
$('#meal-item-error').data('error-message', '请输入有效内容');

2. jQuery的作用域或加载时机问题 #

如果MealItemError所在的脚本执行时，jQuery还没加载完成，或者页面里用了jQuery.noConflict()释放了$的控制权，那你用$就找不到jQuery的方法了。

可以在MealItemError函数开头加个简单测试：

function MealItemError() {
  console.log($, jQuery); // 看看能不能输出jQuery对象
  // 其他代码...
}

如果$是undefined，那要么是jQuery没加载，要么是要用jQuery关键字代替$，比如jQuery('#meal-item-error').data(...)。

3. 动态元素的时机问题 #

你提到值会根据用户添加的食物数量动态变化，那MealItemError处理的可能是动态生成的元素。如果你的代码在元素还没被添加到DOM里就调用了data()，虽然不会报这个错，但也有可能因为选择器没选中元素，后续操作出错（不过你的报错是方法不存在，所以这个可能性稍低，但也可以排查下）。

比如要确保在元素被append()或insertAfter()之后再调用data()方法。

快速排查步骤 #

1. 把MealNameError里的元素操作代码复制到MealItemError里替换原有代码，看还会不会报错——如果不报错，说明是元素选择或获取的问题。
2. 检查MealItemError里的元素选择器是不是写错了，比如ID拼写错误，导致选中了不存在的元素？不过空的jQuery对象调用data()不会报这个错，只会无效果，但也可以确认下。

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