javascript - 需要让 qtip 显示正确的动态新 javascript html 表格数据

Question

我有一个类似的问题，我没有在 fiddle 中显示正确的数据。另一个问题显示的是做表行克隆，但我的数据是表附加到 div

jQuery $.each 循环显示我在何处动态创建了标题(工具提示)

这是 fiddle :http://jsfiddle.net/bthorn/Lpuf0x7L/1/

$.each(allData, function (index, issues) {

    strResult += "<tr><td class='nameField'> <a href='#'>" + issues.LAST_NAME + " " + issues.FIRST_NAME + " " + issues.INITIALS + "</a></td><td>" + issues.OFFICE + "</td><td>" + issues.TITLE + "</td>";
    strResult += "<td>" + issues.DEPARTMENT + "</td><td class='alias'>" + issues.ALIAS_NAME + "</td>";
    // NEED TO ADD QTIP to the issues.DEPARTMENT title tooltip   //////
     addTooltips();
    /////////
    strResult += "</tr>";
});
strResult += "</table>";


$("#divEmpResult").html(strResult);

我几个小时前提出的带有 OP 答案的老问题应该会有帮助

dynamic javascript data with qtip is overriding all tooltips with same message

我正在尝试调用此函数，但我知道我需要附加来自 qtip 的额外数据。

OP 正在执行 .insertBefore(this) 但我不确定如何处理我的表格行

 $('button').on('click', function() {
$('<div/>', {
class: 'tips',
text: 'Dynamically inserted.'
}).insertBefore(this);

addTooltips();

Answer 1

在第二个代码片段中，addTooltips 函数在 动态元素通过 .insertBefore()< 插入 DOM 后被调用 方法。

在您的第一个代码片段中，您在 实际附加元素之前调用了 addTooltips 函数，这就是它没有按预期工作的原因:

$("#divEmpResult").html(strResult);
addTooltips(); // Call the function *after* the elements exist in the DOM

为了防止之前的工具提示被覆盖，将所有具有data-hasqtip属性的元素都取反。您还可以根据 title 属性或一些预定义的默认值设置工具提示文本，如下例所示:

$('.tips:not([data-hasqtip])').each(function() {
  $(this).qtip({
    content: {
      text: $(this).attr('title') || 'This is the message!'
    },
    hide: {
      fixed: false
    },
    position: {
      corner: {
        target: 'topLeft',
        tooltip: 'bottomRight'
      }
    }
  });
});

要解决工具提示仅包含第一个单词的最后一个问题，您需要将 title 属性值括在引号中。以前，您的 HTML 被呈现为:title=some words here，这导致浏览器自动在第一个以空格分隔的单词周围插入引号并将随后的单词转换为单独的属性。

Working Example Here

title 属性值需要用引号引起来:

strResult += '<td class="tips" title="' + issues.DEPARTMENT + '">' + issues.DEPARTMENT + '</td><td class="alias">' + issues.ALIAS_NAME + '</td>';

为避免此类错误，我强烈建议使用 JS 模板引擎，例如 handlebars .