Bootstrap 5 原生 元素在用户更改颜色后，其动态值需通过 .val() 方法读取，而非 .attr('value')——后者仅返回 HTML 初始化时的静态属性值。
bootstrap 5 原生 `` 元素在用户更改颜色后，其动态值需通过 `.val()` 方法读取，而非 `.attr('value')`——后者仅返回 html 初始化时的静态属性值。
在 Bootstrap 5 中，<input type="color"> 是原生 HTML5 表单控件，并非第三方插件（如 bootstrap-colorpicker），因此其行为完全遵循标准 DOM 规范：用户选择新颜色时，元素的 value 属性（attribute）不会自动更新，但其 value 属性（property）会实时同步。这是 HTML 表单控件的通用机制——getAttribute('value') 或 $().attr('value') 读取的是初始 HTML 中声明的字符串，而 $().val() 或 element.value 访问的是当前交互状态下的实际值。
正确监听与获取方式如下：
$('#priceColor').on('change', function() {
const currentColor = $(this).val(); // ✅ 正确：获取当前选中颜色（如 "#ff6b35"）
console.log('Selected color:', currentColor);
// 同步更新其他依赖项（例如预览区域背景色）
$('#pricePreview').css('background-color', currentColor);
});⚠️ 注意事项：
-
change事件仅在用户确认选择（如关闭拾色器弹窗）后触发，若需实时响应（如拖拽滑块过程），可监听input事件； - 确保 jQuery 已正确加载，且脚本执行于 DOM 就绪之后（推荐包裹在
$(document).ready(...)中）； - 不要混用
.attr('value')和.val()：前者用于设置/读取初始值（仅首次有效），后者用于读写运行时值； - 若需表单提交时获取该值，请放心——浏览器提交时使用的是
valueproperty，因此$(this).val()与表单实际提交值完全一致。
总结：始终使用 $(element).val() 获取 <input type="color"> 的当前颜色值；避免使用 .attr('value')，它无法反映用户交互后的最新状态。这一原则同样适用于所有原生表单控件（如 text、range、date 等）。
