工具提示器中的 onclick 事件
onclick event inside tooltipster
我正在使用带有 HTML 内容的工具提示,需要挂钩 HTML 内容中元素的点击。我的代码如下所示:
$('.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 和 div 的容器=22=]tooltip-template-span 元素。
$(".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!");
});
}
您应该在初始化工具提示之前绑定点击事件。
$(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());
}
}
);
});
查看
我正在使用带有 HTML 内容的工具提示,需要挂钩 HTML 内容中元素的点击。我的代码如下所示:
$('.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 和 div 的容器=22=]tooltip-template-span 元素。
$(".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!");
});
}
您应该在初始化工具提示之前绑定点击事件。
$(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());
}
}
);
});
查看