$('#submitBtn').on('click', function () {
  submitForm();
});

const $btn = $('#submitBtn');
if ($btn.length) {
  $btn.on('click', submitForm);
}

$(document).on('click', '#submitBtn', submitForm);

$('a.link').on('click', function () {
  doSomething();
  return false;
});

$('a.link').on('click', function (e) {
  e.preventDefault();
  doSomething();
});

$('.item').on('click', function () {
  console.log('click');
});

// 后续通过 AJAX 添加的元素
$('.list').append('
new
');

$('.list').on('click', '.item', function () {
  console.log('click');
});

$.each($('.item'), function () {
  console.log(this); // DOM 元素
});

$('.item').each(function () {
  $(this).addClass('active');
});

$('#content').html(userInput);

$('#content').text(userInput);

function escapeHtml(str) {
  return $('
').text(str).html();
}

老手铁律：用户内容一律 .text()，除非你明确信任来源。

坑点六：$(window).load()已废弃

旧代码常见
$(window).load(function () {
  // do something
});


在 jQuery 1.8+ 已废弃，3.x 直接报错。


正确写法

$(window).on('load', function () {
  // 页面所有资源加载完成
});

// 或 DOM 就绪
$(function () {
  // DOM ready
});


区别：


DOMContentLoaded：DOM 就绪

window.load：图片、iframe 等全部加载完成


坑点七：链式调用中断，却以为是 jQuery Bug

隐蔽错误

$('.item')
  .addClass('active')
  .css('color', 'red')
  .find('.sub')
  .end()
  .removeClass('active'); // 你可能以为操作的是 .item


正确理解


.find() 切换了上下文

.end() 返回上一级
链式越长，越容易失控


建议

const $item = $('.item');
$item.addClass('active');
$item.find('.sub').css('color', 'red');


老手经验：超过 3 次的链式调用，考虑拆开写。

坑点八：.prop()和.attr()用错

经典错误

$('#checkbox').attr('checked', true);


在 jQuery 1.6+ 中，表单属性状态要用 .prop() 。

正确用法



场景
方法




checked / disabled / selected
.prop()


自定义属性 / HTML 属性
.attr()




$('#checkbox').prop('checked', true);
$('#box').attr('data-id', 123);


记忆口诀：状态用 prop，属性用 attr。

坑点九：AJAX 缓存导致“数据不更新”

IE / 旧项目常见

$.get('/api/user', function (res) {
  console.log(res);
});


IE 会缓存 GET 请求。

解决方案

$.ajax({
  url: '/api/user',
  type: 'GET',
  cache: false
});


或 URL 加时间戳：

$.get('/api/user?_=' + Date.now());


老手建议：所有 GET 请求接口，默认 cache: false。

坑点十：内存泄漏 —— 事件重复绑定

高频坑点（SPA / 弹窗场景）

function initPage() {
  $('#btn').on('click', handler);
}


页面多次初始化，事件绑定多次。
正确写法

function initPage() {
  $('#btn').off('click').on('click', handler);
}


或事件委托（最优解）：

$(document).on('click', '#btn', handler);


老手经验：单页应用里，90% 的“灵异事件”都是重复绑定导致的。

总结：老手也会踩的 10 个坑



坑点
核心问题




选择器无结果
静默失败


return false
误用冒泡


动态元素事件
未用委托


each 混淆
this 指向


html() XSS
安全问题


window.load
API 废弃


链式失控
上下文混乱


prop / attr
状态 vs 属性


AJAX 缓存
数据不更新


内存泄漏
重复绑定




写在最后
jQuery 不是“过时”，而是足够成熟。
在存量系统、后台管理、快速交付场景中，它依然高效。
真正拉开差距的，不是会不会用 $()，而是能不能避开这些“隐形坑”。
到此这篇关于一文盘点10个jQuery项目中高频出现的坑点(老手都在看)的文章就介绍到这了,更多相关jQuery避坑指南内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！