Jquery 工具提示器工作不正常

我正在尝试编写一个chrome扩展，它突出显示某些名称，并在工具提示中提供有关该名称的附加信息。基本上，我有一个名称和ID如下的对象：

var list = {
    'Name1' : 'ID0001',
    'Name2' : 'ID0002',
}

然后，我使用jQuery highlight插件高亮显示文档中出现的每一个键，并为一个span元素分配一个与键的值对应的类（例如ID0001），这很好

$.each(list, function(key, value) {
    $("p").highlight(key, {caseSensitive: false, className: value });
});

结果如下：

<span class="ID0001">Name_1</span>

现在，如果我第一次将鼠标悬停在一个包含名称的范围上，tooltipster不会做任何事情，Chrome控制台会这样说：

Uncaught ReferenceError: content is not defined 

但我再次将鼠标悬停在它上面，它将显示正确的内容。此外，如果我第一次将鼠标悬停在一个名称上，第二次将鼠标悬停在另一个名称上，工具提示将显示第一个名称的内容

我对JS和jQuery还比较陌生，我只是不知道我在这里做错了什么

我还发现了一些关于类似问题的其他线索，但建议的解决方案都不适合我

以下是“完整”更新代码：

$(document).ready(function() {
$.each(list, function(key, value) {
    $("p").highlight(key, {caseSensitive: false, className: value });
});

$('span[class*=ID]').tooltipster({
    interactive: true,
    contentAsHTML: true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        var id = $(this).attr('class').replace(' tooltipstered','');
        var content = generate_content(id);
        origin.tooltipster('content', content);
    }

});

function generate_content(id) {
    $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Getting information from the .sjon and storing it in "content"
    });
    return content;
}

});

---

由于对$.getJSON的调用是异步的，因此应该在$.getJSON的已完成回调中更新tooltipster的内容。您可以使用下面的代码-

$('span[class*=ID]').tooltipster({
    interactive: true,
    contentAsHTML: true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        var id = $(this).attr('class').replace(' tooltipstered','');
        generate_content(id, origin);
    }
});

function generate_content(id, origin) {
    $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Getting information from the .sjon and storing it in "content"
         var content -  set the content here.
         origin.tooltipster('content', content);

    });
}

---

})

从我看到的代码中缺少几个花括号，您能解决这个问题吗？需要记住的一点是，

$.getJSON

不是异步的，这将是在JSON内容请求完成之前内容不会显示的原因：）我怎么能等到$.getJSON完成后再继续呢？我通常不使用

$.getJSON

，但是您是否尝试过对您的示例进行复述以遵循

functionBefore

站点上的示例？它需要修改才能使用

GET

，数据类型应该是

JSON

：）

$(document).ready(function() {
$.each(list, function(key, value) {
    $("p").highlight(key, {caseSensitive: false, className: value });
});

$('span[class*=ID]').tooltipster({
    interactive: true,
    contentAsHTML: true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        var id = $(this).attr('class').replace(' tooltipstered','');
        var content = generate_content(id);
        origin.tooltipster('content', content);
    }

});

function generate_content(id) {
    $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Getting information from the .sjon and storing it in "content"
    });
    return content;
}

});

$('span[class*=ID]').tooltipster({
    interactive: true,
    contentAsHTML: true,
    content: 'Loading...',
    functionBefore: function(origin, continueTooltip) {
        continueTooltip();
        var id = $(this).attr('class').replace(' tooltipstered','');
        generate_content(id, origin);
    }
});

function generate_content(id, origin) {
    $.getJSON(chrome.extension.getURL('db.json'), function(db) {
        // Getting information from the .sjon and storing it in "content"
         var content -  set the content here.
         origin.tooltipster('content', content);

    });
}