需要获取qtip来显示正确的动态新javascript html表数据

Need to get qtip to display correct new javascript html table data that is dynamic

本文关键字：动态 javascript html 数据 获取 qtip 显示      更新时间：2023-09-26

我有一个类似的问题，我没有合适的数据来展示。另一个问题显示的是进行表行克隆，但我的数据是将表附加到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的答案应该对有帮助

带有qtip的动态javascript数据覆盖了带有相同消息的所有工具提示

我试图调用这个函数，但我知道我需要从qtip附加额外的数据

OP正在执行.insertBefore(this)，但我不确定如何使用我的表行执行该操作

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

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

在您的第一个代码片段中，在元素被实际附加之前，您正在调用addTooltips函数，这就是为什么它不能按预期工作的原因：

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

为了防止覆盖以前的工具提示，请否定所有具有data-hasqtip属性的元素。您还可以根据标题属性或一些预定义的默认值设置工具提示文本，如下面的示例：

$('.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，这导致浏览器自动在第一个用空格分隔的单词周围插入引号，并将以下单词转换为单独的属性。

此处的工作示例

title属性值需要用引号括起来：

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

为了避免这样的错误，我强烈建议使用JS模板引擎，比如handlebas。

相关文章：