工具提示器中的 onclick 事件

Posted 2023-05-07

【中文标题】工具提示器中的 onclick 事件

【英文标题】：onclick event inside tooltipster

【发布时间】：2018-01-18 14:50:00

【问题描述】：

我正在使用带有 html 内容的工具提示器，并且需要在 HTML 内容中挂钩元素的 onclick。我的代码如下所示：

    $('.groups-tooltip').tooltipster(            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: 
            mouseenter: true
        ,
        triggerClose: 
            mouseleave: true
        ,

        functionReady: function(instance, helper)   
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').on("click", function() 
                console.log("Clicked!");
            );  

            instance.content($('#tooltip-template').html());
              
    );

tooltip-template 只是 tooltip-template-div 和 tooltip-template-span 元素的 div 容器。

$(".tooltip-template-div").hide();

部分运行良好，但 onclick 挂钩似乎没有任何效果。

谢谢！

【参考方案1】：

您在插入 html 之前添加事件侦听器：

尝试颠倒顺序

  functionReady: function(instance, helper) 
       instance.content($('#tooltip-template').html());  
        $(".tooltip-template-div").hide();
        $('.tooltip-template-span').on("click", function() 
            console.log("Clicked!");
        );

      

【参考方案2】：

你应该在初始化tooltipster之前绑定点击事件。

$(document).ready(function()
    $('.tooltip-template-span').on('click', function() 
      alert("Clicked!");
    );

   $('.groups-tooltip').tooltipster(            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: 
            mouseenter: true
        ,
        triggerClose: 
            mouseleave: true
        ,

        functionReady: function(instance, helper)
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').click();
            instance.content($('#tooltip-template').html());
           
        
   );
);

您可以通过https://jsfiddle.net/8jmt0he6/查看