当在 Bootstrap 卡片（.estimate）上绑定全局跳转事件时，其内部“Read More”按钮的点击会触发父级重定向；需通过事件委托优化与 e.stopPropagation() 或事件绑定方式调整，确保子元素点击仅执行模态框逻辑，不触发卡片跳转。
当在
bootstrap
卡片（`.estimate`）上绑定全局跳转事件时，其内部“read more”按钮的点击会触发父级重定向；需通过事件委托优化与 `e.stoppropagation()` 或事件绑定方式调整，确保子元素点击仅执行模态框逻辑，不触发卡片跳转。
在实际开发中，为 Bootstrap 卡片添加整体点击跳转（如 $('.estimate').on('click', ...)）是一种常见交互模式。但当卡片内部动态插入可点击子元素（如“read more…”图标或链接）时，若未妥善处理事件流，浏览器默认的
事件冒泡机制
会导致：用户点击 .readmore 元素 → 事件向上冒泡至 .estimate 父容器 → 触发页面跳转，模态框无法正常打开。
✅ 正确解决方案：隔离事件作用域 + 阻断冒泡
核心思路是
让 .readmore 的点击事件不传播到父级 .estimate
。推荐以下两种等效且健壮的方式：
方式一：使用 e.stopPropagation()（推荐，语义清晰）
方式二：优化 DOM 结构 + 直接绑定（如原答案所示）
将 .readmore 渲染为 图标而非 标签（避免 默认行为干扰），并确保其
不在 .estimate 的跳转事件触发路径中被误判
：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
⚠️ 注意事项与最佳实践
永远在子元素事件处理器中调用 e.stopPropagation()
：这是解决冒泡冲突最直接、最可控的方式；
避免使用 作为“read more”触发器
：它自带默认跳转行为，易与 preventDefault() 混淆，改用 或 更语义化；
优先使用事件委托 $(document).on('click', selector, handler)
：适用于动态插入的 .readmore 元素，比 $('.readmore').on(...) 更健壮（后者仅绑定当前已存在的元素）；
检查 Bootstrap Modal 初始化
：确保 #modalEditDescription 已正确定义且依赖 JS 已加载（如 bootstrap.bundle.min.js）；
补充 CSS 增强体验
：
通过以上调整，即可实现：点击卡片任意空白区域 → 跳转详情页；点击右上角编辑图标 → 精准打开编辑模态框，互不干扰，交互逻辑清晰可靠。
$('.estimate').on('click', function (e) {
// 若点击目标是 .readmore 或其子元素，直接退出，不跳转
if ($(e.target).closest('.readmore').length) {
return;
}
var eFITID = $(this).data('efitid');
window.location.href = "/your-path?efitid=" + eFITID;
});
// 单独绑定 .readmore —— 使用事件委托更安全（尤其对动态生成元素）
$(document).on('click', '.readmore', function (e) {
e.stopPropagation(); // 关键：阻止冒泡至 .estimate
$("#modalEditDescription").modal('show');
});$(function () {
const MAX_LENGTH = 20;
$('.fifty-chars').each(function () {
const $el = $(this);
const fullText = $el.text().trim();
if (fullText.length > MAX_LENGTH) {
const truncated = fullText.substring(0, MAX_LENGTH);
$el.html(truncated + '…')
.append(
$('', {
class: 'fa fa-edit readmore ml-2',
style: 'color:#f84018; cursor: pointer;',
title: '查看并编辑完整描述'
})
);
} else {
$el.html(fullText)
.append(
$('', {
class: 'fa fa-edit readmore ml-2',
style: 'color:#f84018; cursor: pointer;',
title: '查看并编辑完整描述'
})
);
}
});
// 直接绑定（因元素已存在）或使用委托（更通用）
$(document).on('click', '.readmore', function (e) {
e.stopPropagation(); // 必加！防止冒泡
$("#modalEditDescription").modal('show');
});
});.readmore {
display: inline-block;
margin-left: 0.5rem;
transition: transform 0.2s;
}
.readmore:hover {
transform: scale(1.1);
color: #d32f2f !important;
}