Question

我知道jQuery工具提示小部件的前提是，在调用工具提示函数之前必须存在一个绑定了工具提示的HTML元素，因此这个代码片段可以工作：

$('#test').append('<span id="testspan" title="My test span">Hello world</span>");
$('#testspan').tooltip();

但是，我通过循环浏览一些json创建一个完整的HTML部分，然后将整个部分附加到我的页面。我创建的每条记录都有一些空间，我想使用content参数添加一些自定义内容。使用以下伪代码将不起作用，因为当我调用.tooltip()时，该元素不存在：

// parse JSON
/*
   ...
*/

// add results to page
var html;
for (var i=0; i<json_output.length; i++) {
  html+='<span id="' + i + '">' + json_output[i][0].val + '</span>';
  $('#' + i).tooltip({content: "Some complicated stuff from " + json_output[i][1].val + " that can't be in a title attribute"});
}

$('#mycontent').append(html);

我可以在循环中调用append - 但我想这会对性能产生影响，或者我可以将数据存储在一个单独的数组中，然后循环遍历它并在{{之后创建所有工具提示1}}通话 - 但这感觉不是很干净。有没有办法使用回调函数（或类似的）来设置.append()参数？

Answer 1

我认为这个解决方案适用于你的情况，使用jQuery元素数据存储：

var $mycontent = $('#mycontent');
for( var i = 0; i < json_output.length; i++ ){
    var $item = $('<span class="mytooltip" id="' + i + '" title="">' + json_output[i][0].val + '</span>');
    $item.data('content', json_output[i][1].val);
    $mycontent.append($item);
}

$('.mytooltip').tooltip({ 
    content: function(){
        return $(this).data('content');
    }
});

注意：我不确定，但我认为.tooltip()元素必须具有title属性（甚至为空）。

动态添加工具提示内容

1 个答案: