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

【问题标题】：Need to get qtip to display correct new javascript html table data that is dynamic需要让qtip显示正确的动态新javascript html表数据
【发布时间】：2015-12-29 11:13:03
【问题描述】：

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

jQuery $.each 循环显示了我在哪里动态创建了标题（工具提示）

这是小提琴：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();

【问题讨论】：

标签： javascript jquery html css qtip2

【解决方案1】：

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

在您的第一个代码 sn-p 中，您调用了 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。

【讨论】：