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

我已经处理了这个问题已经有几天了，但是我找不到解决方案。我在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;
}

之后，当我将鼠标放在'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">

undureck typeError：无法阅读未定义的属性'宽度'

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

两件事：

您应销毁tooltipster S并在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

html

相关内容

最新更新

热门标签：