Tooltipster 不适用于动态生成的元素答案

【问题标题】：Tooltipster doesn't work with dynamically generated elementsTooltipster 不适用于动态生成的元素
【发布时间】：2016-06-21 11:42:47
【问题描述】：

我已经处理这个问题好几天了，但我找不到解决方案。我在 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 时。第一次我将光标放在图像上，我在浏览器控制台中没有收到任何错误，但第二次我重复它，我得到了这个错误：

Tooltipster：一个或多个工具提示已附加到元素以下。无视。

   <img id="led_27269" src="green_led.gif" style="cursor: pointer" class="tooltipstered">

未捕获的类型错误：无法读取未定义的属性“宽度”

如果有人知道我做错了什么，那将会有所帮助。非常感谢您！

【问题讨论】：

你读过iamceege.github.io/tooltipster/#delegation吗？

标签： javascript jquery tooltipster

【解决方案1】：

两件事：

您应销毁 tooltipsters 并在 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();
    });
}

【讨论】：

非常感谢@MasterDjon 的回答，我以错误的方式调用方法。