工具提示器中的onclick事件
问题描述:
我正在使用HTML内容的工具提示器,需要钩住HTML内容中某个元素的onclick。我的代码看起来是这样的:工具提示器中的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挂钩似乎没有任何效果。
谢谢!
答
您插入HTML之前添加事件侦听器:
试着颠倒顺序
functionReady: function(instance, helper){
instance.content($('#tooltip-template').html());
$(".tooltip-template-div").hide();
$('.tooltip-template-span').on("click", function(){
console.log("Clicked!");
});
}
答
你应该绑定单击事件之前初始化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());
}
}
);
});
确实是问题。谢谢 :) – Jonatan44