如何解决Uncaught TypeError: $().barcode及jQuery(...).barcode is not a function错误

这个错误我之前帮不少开发者排查过，核心原因很明确：你调用的barcode不是jQuery的原生方法，对应的条码插件要么没引入、加载顺序错了，要么出现了兼容性/冲突问题。下面是一步步的解决步骤：

1. 确认条码插件的正确引入 #

$().barcode是第三方jQuery插件（比如常用的jquery-barcode）提供的方法，jQuery本身没有这个功能。你需要：

• 检查HTML中是否引入了该插件的脚本文件，必须放在jQuery脚本之后（插件依赖jQuery才能绑定方法）：

  <!-- 先加载jQuery核心库 -->
  <script src="jquery-1.10.2.js"></script>
  <!-- 再加载条码插件 -->
  <script src="jquery-barcode.min.js"></script>
  

• 打开浏览器控制台的Network标签，检查插件脚本的请求状态：如果是404，说明文件路径写错了，要修正插件文件的存放路径。

2. 确保调用时机正确 #

从错误栈来看，你是在AJAX请求的success回调里调用codeBars函数，进而执行barcode方法。要确保：

• 插件在AJAX请求完成前已经加载完成，避免异步加载顺序问题。
• 所有调用barcode的代码都在DOM和插件加载完成后执行，比如包裹在$(document).ready()中：

  $(document).ready(function() {
      // 这里写AJAX请求或者直接调用barcode的代码
      $.ajax({
          url: 'your-api-url',
          success: function(data) {
              $('#target-element').barcode(data.code, 'code128');
          }
      });
  });
  

3. 排查jQuery冲突或重复加载问题 #

• 如果页面中引入了其他JS库（比如Prototype、MooTools），可能和jQuery的$标识符冲突。可以改用jQuery代替$，或者使用noConflict重新绑定：

  jQuery.noConflict();
  jQuery(document).ready(function($) {
      // 这里可以安全使用$调用jQuery方法
      $('#target-element').barcode('123456', 'code128');
  });
  

• 检查是否重复引入了不同版本的jQuery：如果先加载了jQuery 1.10.2并绑定了插件，之后又加载了另一个版本的jQuery，会覆盖之前的$对象，导致找不到barcode方法。

4. 验证版本兼容性 #

你使用的是jQuery 1.10.2，属于比较老的版本，要确认你用的条码插件版本和这个jQuery版本兼容。有些新插件可能不再支持这么老的jQuery版本，建议找对应兼容的插件版本，或者尝试升级jQuery（注意升级后要测试其他功能是否正常）。

快速调试技巧 #

在调用barcode方法前，先在控制台执行：

console.log($.fn.barcode);

• 如果输出undefined：说明插件完全没加载成功，回到步骤1检查引入问题。
• 如果输出一个函数：说明插件加载正常，问题可能出在选择器错误（比如找不到目标元素）或者调用时机上。

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