本文详解为何基于 jquery 的多步骤表单（如 codepen 中正常运行的代码）在 django 项目中点击无效，并提供根本性解决方案：确保脚本在 dom 完全加载后执行。
本文详解为何基于 jquery 的多步骤表单（如 codepen 中正常运行的代码）在 django 项目中点击无效，并提供根本性解决方案：确保脚本在 dom 完全加载后执行。
在实际开发中，一个常见却极易被忽视的问题是：一段在 CodePen 或 JSFiddle 中完美运行的 jQuery 表单导航逻辑（如“Next”/“Previous”切换 fieldset），迁移到本地 Django（或其他框架）项目后突然失效——按钮点击无响应，控制台也无报错。问题根源往往并非 jQuery 版本、CDN 链接或 Django 配置，而是脚本执行时机不当。
核心原因在于：CodePen 默认将 JavaScript 设置为 onLoad（即等 <body> 渲染完毕后再执行），而开发者在本地 HTML 中直接嵌入 <script> 标签（尤其放在 <head> 内），会导致 jQuery 代码在 DOM 元素尚未生成时就已执行。此时 $(".next") 查找不到任何匹配元素，事件绑定失败，后续点击自然无效。
✅ 正确做法：将所有 jQuery 逻辑包裹在 DOM 就绪回调中：
$(document).ready(function() {
// jQuery time
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating = false;
$(".next").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')',
'position': 'absolute'
});
next_fs.css({ 'left': left, 'opacity': opacity });
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1 - now) * 50) + "%";
opacity = 1 - now;
current_fs.css({ 'left': left });
previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity });
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
});⚠️ 关键注意事项：
- 不要仅依赖 <script> 标签位置：即使把 script 放在 </body> 底部，仍建议显式使用 $(document).ready()，以兼容各种加载场景（如动态插入内容、Django 模板继承中的块覆盖）；
- 检查 jQuery 加载顺序：确保 jQuery 及其插件（如 jquery.easing.min.js）在自定义脚本之前加载完成，可通过浏览器开发者工具的 Network 标签页验证资源是否 200 加载成功；
- 避免重复初始化：若页面通过 AJAX 更新或使用前端路由（如 HTMX、Turbo），需在新 DOM 插入后重新绑定事件，或改用事件委托（例如 $(document).on('click', '.next', handler)）；
- Django 静态文件路径确认：确保 {% static 'assets/js/profile_completion.js' %} 对应的文件真实存在且路径正确（可通过浏览器访问 http://127.0.0.1:8000/static/assets/js/profile_completion.js 直接验证）。
总结：CodePen 的“开箱即用”掩盖了前端开发中最基础也最关键的执行时序问题。将交互逻辑置于 $(document).ready() 是保障 jQuery 代码可靠运行的黄金实践——它不增加复杂度，却能一劳永逸地规避“代码写对了却没反应”的调试陷阱。
