需要获取qtip来显示正确的新的javascript html表数据是动态的 [英] Need to get qtip to display correct new javascript html table data that is dynamic

问题描述

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

I have a similar question in which I didn't have the right data in a fiddle to show. What the other question shows is doing a table row clone, but my data is table append to a div

jQuery $。each 循环显示我有一个动态创建的标题（工具提示）

The jQuery $.each loop shows where I have a dynamically created the title (tooltip)

这是小提琴： 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回答应该是有用的

My old question from a few hours with OP answer should be helpful

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

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

I am trying to call this function but i know that I needs to have additional data from qtip appended to it.

OP正在做一个 .insertBefore（this），但我不知道该怎么做我的表格行

OP was doing a .insertBefore(this) but I am not sure how to do that with my table row

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

addTooltips();

推荐答案

通过 .insertBefore（）将动态元素插入DOM后， addTooltips / code>方法。

In the second code snippet, the addTooltips function was called after the dynamic element(s) were inserted into the DOM via the .insertBefore() method.

在您的第一个代码片段中，您正在调用 addTooltips > 之前实际附加的元素，这就是为什么它不能正常工作：

In your first code snippet, you are calling the addTooltips function before the elements are actually appended, which is why it isn't working as expected:

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

为了防止以前的工具提示从重写，用 data-hasqtip 属性取消所有元素。您还可以根据标题属性或某些预定义的默认值（如下面的示例）设置工具提示文本：

In order to prevent the previous tooltips from being overridden, negate all the elements with data-hasqtip attributes. You can also set the tooltip text based on the title attribute, or some pre-defined defaults like in the example below:

$('.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'
      }
    }
  });
});

为了解决你最后一个问题，工具提示只包括第一个单词， c $ c> title 属性值。以前，您的HTML被渲染为： title =这里的一些词，这导致浏览器自动在第一个空格分隔的单词之间插入引号，单独的属性。

To address your last issue where the tooltips only included the first word, you need to enclose the title attribute value in quotes. Previously, your HTML was being rendered like: title=some words here, which resulted in the browser automatically inserting quotes around the first white-space separated word and turning the following words into separate attributes.

此处的示例

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

The title attribute value needs to be enclosed in quotes:

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

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

To avoid mistakes like this, I would highly suggest using a JS templating engine such as handlebars.

这篇关于需要获取qtip来显示正确的新的javascript html表数据是动态的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！