工具提示器中的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/