几天来我一直在处理这个问题，但找不到解决方案。我在 Javascript 中有一个函数，它在 Ajax 调用完成后生成 HTML，我这样调用这个函数:
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
});
我的功能是下一个:
function reloadInfo(id) {
var div = document.getElementById(id);
...
code += "<img id='led_" + res.id + "' src='green_led.gif' style='cursor: pointer' class='tooltipstered'>";
code += "<img id='" + res.id + "' src='mygraph.jpg'>";
...
div.innerHTML = code;
}
之后，我尝试使用 Tooltipster，以便在我将鼠标放在“green_led.gif”图像上时将“mygraph.jpg”显示到工具提示中，并在移出鼠标光标时将其隐藏。为此，我在 $(document).ready() 中使用了下一个代码:
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
$("body").on('mouseover', '.tooltipstered', function(){
$(this).tooltipster({
trigger: 'custom'
}).tooltipster('open').tooltipster('content', 'MYcontent');
});
});
但是好像不行。我已经阅读了 Tooltipster 文档，但我不知道在动态生成 HTML 代码时我做错了什么(当我尝试使用静态 HTML 时它可以工作，但我做的有点不同):
JavaScript
$(document).ready(function(){
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
})
});
HTML
<body>
<button id="1" class="tooltipstered" style="float: right">Hover1</button>
<button id="2" class="tooltipstered">Hover1</button>
</body>
问题出在我用 JavaScript 生成 HTML 时。第一次将光标放在图像上时，浏览器控制台中没有出现任何错误，但第二次重复时出现以下错误:
- 工具提示:一个或多个工具提示已附加到元素 以下。无视。
<img id="led_27269" src="green_led.gif" style="cursor: pointer" class="tooltipstered">
- 未捕获的类型错误:无法读取未定义的属性“宽度”
如果有人知道我做错了什么，那将会有所帮助。非常感谢您!
最佳答案
两件事:
- 您应该销毁
tooltipster并在 HTML 内容更改时重新创建它们。 - 调用
tooltipster方法应通过$(...).tooltipster(methodName, arg1, arg2,...)完成。在这里您应该查看文档以获取正确的方法名称和参数。因此，您应该像在$("body").on('mouseover' .... 中那样每次都调用创建(不带方法名称)。
娱乐:
$(document).ready(function(){
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
})
});
应移动:
function reloadInfo(id) {
$(".tooltipstered").tooltipster('destroy');
... your reloading code
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
});
}
关于javascript - Tooltipster 不适用于动态生成的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37943478/