jQuery 1.11.2 .on() 綁定 click 事件獲取 prop("title") 失效：easyTooltip 插件衝突排查

問題現象

jQuery(".login_half > input").on("blur", function() {
    var str = jQuery(this).prop("title");  // ✓ 正常獲取
    alert(str);
});

jQuery(".login_half > input").on("click", function() {
    var str1 = jQuery(this).prop("title");  // ✗ 獲取不到（undefined/空）
    alert(str1);
});

同一選擇器，blur 正常，click 失效。jQuery 版本 1.11.2。

排查過程與根因

1. 排除選擇器、事件冒泡、DOM 就緒時機 — 均正常
2. 禁用其他 JS 文件逐步測試 — 發現引入 easyTooltip.js 後復現
3. 檢查 easyTooltip 源碼 — 其在初始化時移除元素的 title 屬性並存儲內部，hover 時動態創建提示框
4. click 觸發時，title 已被 easyTooltip 移除 → prop("title") 返回空
5. blur 觸發時，easyTooltip 已恢復 title（或未介入） → 正常

解決方案

方案一：獲取易易提示內部存儲的標題（推薦）

var str1 = jQuery(this).data("easyTooltip-title") || jQuery(this).prop("title");
// 或根據插件實際存儲鍵名調整，如 data("title")、data("original-title")

方案二：在 easyTooltip 初始化前緩存 title

jQuery(".login_half > input").each(function() {
    jQuery(this).data("cachedTitle", this.title);  // 原生 DOM 屬性
});

// click 事件中
var str1 = jQuery(this).data("cachedTitle");

方案三：修改 easyTooltip 配置（若支持）

// 部分版本支持保留 title
jQuery(".login_half > input").easyTooltip({
    keepTitle: true  // 假設參數，需查閱文檔
});

最佳實踐建議

• 🔍 引入第三方插件前，先閱讀源碼了解其對 DOM 的修改
• 📦 使用命名空間隔離數據：data("myPlugin-title") 避免衝突
• 🧪 單元測試覆蓋關鍵交互，集成測試驗證插件共存
• 📝 記錄已知衝突組合，團隊內部維護「插件兼容性矩陣」

版本升級提示

jQuery 1.11.2 較舊（2014 年），建議升級至 3.x（兼容性較好）或使用原生 element.title / dataset 降低依賴。