工具提示器中的onclick事件

Question

我正在使用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()); 
     }  
    }); 

提示模板是只为提示模板-DIV和提示模板跨度 elemnts一个div容器。

的

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

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

谢谢！

Answer 1

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

试着颠倒顺序

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

    } 

Answer 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/