工具提示不适用于动态生成的元素

Question

I've been dealing with this problem for some days but I can't find the solution. 我已经处理了几天这个问题，但是找不到解决方案。 I have a function in Javascript that generates HTML after an Ajax call is done and I call this function like this: 我有一个Javascript函数，在完成Ajax调用后会生成HTML，我这样调用该函数：

$(document).ready(function() {
    $("#list").change(function() {
        reloadInfo($('#list').val());
    });
    reloadInfo($('#list').val());
});

And my function is the next: 接下来是我的功能：

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;
}

After that, I've tried to use Tooltipster in order to show 'mygraph.jpg' into a tooltip when I put the mouse over the 'green_led.gif' image and hide it when I move out the mouse cursor. 之后，我尝试使用工具提示器，以便将鼠标放在“ green_led.gif”图像上时将“ mygraph.jpg”显示在工具提示中，并在移出鼠标光标时将其隐藏。 To do so, I've used the next code into my $(document).ready(): 为此，我在$（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');
    });
});

But it doesn't seem to work. 但这似乎不起作用。 I've read Tooltipster documentation but I don't know what I'm doing wrong when I generate dynamically the HTML code (when I try it with static HTML it works, but I do it a bit different): 我已经阅读了Tooltipster文档，但是当我动态生成HTML代码时（当我尝试使用静态HTML时，它可以工作，但是有点不同），我不知道我在做什么错：

JavaScript 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 HTML

<body>
    <button id="1" class="tooltipstered" style="float: right">Hover1</button>
    <button id="2" class="tooltipstered">Hover1</button>
</body>

The problem is when I generate HTML with JavaScript. 问题是当我使用JavaScript生成HTML时。 First time I put the cursor over the image I don't get any error in the browser console, but the second time I repeat it i get this errors: 第一次将光标放在图像上时，在浏览器控制台中没有出现任何错误，但是第二次重复时，出现了以下错误：

Tooltipster: one or more tooltips are already attached to the element below. 工具提示：以下元素已附加一个或多个工具提示。 Ignoring. 忽略。

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

Uncaught TypeError: Cannot read property 'width' of undefined 未捕获的TypeError：无法读取未定义的属性“宽度”

If anybody knows what I'm doing wrong it would be of help. 如果有人知道我在做什么错，那将是有帮助的。 Thank you very much in advanced!! 非常感谢高级！！

Answer 1

Two things : 两件事情：

You shall destroy the tooltipster s and recreate them on HTML content change. 您应销毁tooltipster并在HTML内容更改时重新创建它们。
Calling a tooltipster method shall be done via $(...).tooltipster(methodName, arg1, arg2,...) . 调用tooltipster方法应通过$(...).tooltipster(methodName, arg1, arg2,...) 。 Here you should look at the documentation for correct method name and arguments. 在这里，您应该查看文档以获取正确的方法名称和参数。 So, you should call the creation (without method name) each time as you did in $("body").on('mouseover' ... . 因此，您应该每次都在$("body").on('mouseover' ...调用，而不用调用方法名称。

For recreation : 休闲娱乐：

$(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();
    })
});

shall be moved : 应移动：

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 JavaScript的

HTML HTML

1 个解决方案

解决方案1
4 已采纳 2016-06-21 12:13:50

工具提示不适用于动态生成的元素

问题描述

JavaScript JavaScript的

HTML HTML

1 个解决方案

解决方案1 4 已采纳 2016-06-21 12:13:50

解决方案1
4 已采纳 2016-06-21 12:13:50