如何在Tippy中使用按钮并通过JavaScript绑定点击事件

你绑定点击事件的代码在页面初始化时执行，此时Tippy模板里的按钮还没被渲染到DOM中，所以只有页面里原本存在的「Testing」按钮能触发事件，tooltip里的三个按钮无法绑定到事件。

方法1：事件委托（推荐） #

利用事件冒泡机制，把事件绑定到一个始终存在的父元素（比如document），通过选择器匹配动态生成的元素：

修改你的脚本代码中的事件绑定部分：

// 替换原来的$('[name="test-button"]').on('click', ...)
$(document).on('click', '[name="test-button"]', function(){
    alert('Works');
});

完整脚本示例：

$(document).ready(function(){
    $('[name="tippy"]').each(function(){
        tippy($(this)[0],{
            allowHTML:true,
            content:document.getElementById('template-test').innerHTML,
            interactive:true,
            placement:'top',
            trigger:'mouseenter'
        });
    });

    $(document).on('click', '[name="test-button"]', function(){
        alert('Works');
    });
});

方法2：利用Tippy生命周期钩子 #

在Tippy的tooltip挂载到DOM后，直接给里面的按钮绑定事件：

修改Tippy初始化代码，添加onMount钩子：

$('[name="tippy"]').each(function(){
    tippy($(this)[0],{
        allowHTML:true,
        content:document.getElementById('template-test').innerHTML,
        interactive:true,
        placement:'top',
        trigger:'mouseenter',
        // 当tooltip挂载完成后绑定事件
        onMount(instance) {
            $(instance.popper).find('[name="test-button"]').on('click', function(){
                alert('Works');
            });
        }
    });
});

• 事件委托：写法简洁，一次绑定就能覆盖所有现有和未来生成的匹配元素，适合场景复杂的动态元素。
• 生命周期钩子：只针对当前tooltip内的元素绑定事件，避免全局事件的潜在冲突，逻辑更精准。

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