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

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

jQuery $.each循环显示我动态创建标题的位置（工具提示）

这是小提琴： http ： //jsfiddle.net/bthorn/Lpuf0x7L/1/

 $.each(allData, function (index, issues) { strResult += " " + issues.LAST_NAME + " " + issues.FIRST_NAME + " " + issues.INITIALS + "" + issues.OFFICE + "" + issues.TITLE + ""; strResult += "" + issues.DEPARTMENT + "" + issues.ALIAS_NAME + ""; // NEED TO ADD QTIP to the issues.DEPARTMENT title tooltip ////// addTooltips(); ///////// strResult += ""; }); strResult += ""; $("#divEmpResult").html(strResult); 

我用OP答案几个小时的老问题应该会有所帮助

使用qtip的动态javascript数据会覆盖所有具有相同消息的工具提示

我试图调用此函数，但我知道我需要附加qtip的附加数据。

OP正在做一个.insertBefore(this)但我不知道如何使用我的表行

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

Answer 1

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

在您的第一个代码段中，您在实际附加元素之前调用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 ，这导致浏览器自动在第一个空格分隔的单词周围插入引号，并将以下单词转换为单独的属性。

这里的工作示例

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

 strResult += '' + issues.DEPARTMENT + '' + issues.ALIAS_NAME + ''; 

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