复选框状态变更时Tooltip不触发问题求助

问题1：类名更新后Tooltip无法触发 #

jQuery UI Tooltip初始化时会一次性绑定匹配items选择器的元素，后续元素类名变化后，Tooltip不会自动重新识别新的类名。解决办法是在类名更新后，销毁并重新初始化Tooltip。

问题2：data属性更新后Tooltip内容不变 #

你用attr()修改data-*DOM属性，但jQuery的data()方法会缓存数据，读取时优先取缓存值而非最新的DOM属性。所以要直接用data()方法更新数据，这样Tooltip读取的就是最新值。

完整修改代码示例 #

// 封装Tooltip初始化函数，方便重复调用
function initTooltip() {
    // 先销毁已存在的Tooltip实例，避免重复绑定
    $(document).tooltip("destroy");
    $(document).tooltip({
        classes: {
            "ui-tooltip": "uitooltip"
        },
        items: ".specialCheckbox2,.specialCheckbox3",
        content: function() {
            var el = $(this).find("input");
            return el.is(":checked") ? el.data("office") : el.data("home");
        }
    });
}

// 页面初始化时加载Tooltip
$(function() {
    initTooltip();
});

// 类名与data属性更新逻辑
const targetInput = $('#w1_Day1');
if (isNoApp) {
    targetInput.parent().addClass('specialCheckbox3').removeClass('specialCheckbox2');
    // 用data()方法直接更新缓存数据
    targetInput.data({
        home: 'No Work allowed',
        office: 'No Work allowed'
    });
} else {
    targetInput.parent().addClass('specialCheckbox2').removeClass('specialCheckbox3');
    targetInput.data({
        home: 'Working',
        office: 'Working'
    });
}

// 更新完成后重新初始化Tooltip，让新类名生效
initTooltip();

内容的提问来源于stack exchange，提问作者Rodney