将 img 追加到 div 时工具提示不起作用

Question

我正在使用工具提示将图像附加到div，但工具提示不适用于div中的图像。我在div 外面有一个静态图像，为此工具提示正在工作。

下面是一个来自 jquery 函数的例外：

success: function (result) {
if (result != null) {
var MyPics = result.MyIctures;
$.each(MyPics, function (index, value) {
var im = (MyPics[index].FILE_PATH);
console.log(MyPics[index].file_date);
var img = $("<img />");
img.attr("id",""+ MyPics[index].file_path+"");
img.attr("style", "height:100px;width: 100px");
img.attr("data-toggle", "tooltip");
img.attr("data-html", "true");
img.attr("data-placement", "top");
img.attr("title", "<em>Title:" + MyPics[index].file_name + "</em> <hr> <b></b>");
img.addClass("img_preview");
img.attr("src", im);
$("#mypics").append(img);
// console.log(im);
//   
}
)
}
}

此 img 的工具提示有效，但附加到div 的工具提示无效。

<img id="bing_img_dessc" class="img_preview" style="height:50px" data-toggle="tooltip" data-html="true" data-placement="top" title="<em>sss</em> <hr> <b>sss</b>" src="~/Resources/Images/login-user-icon.png">  

任何建议都会有所帮助。嗡嗡。

Answer 1

问题是因为你只在页面加载时调用tooltip()，所以只有此时存在于 DOM 中的元素才会在悬停时显示工具提示。要解决此问题，您还需要在添加新映像时调用tooltip()：

success: function(result) {
if (!result)
return;
var images = result.MyIctures.map(function(image) {
return $('<img />', {
'id': image.file_path,
'data': {
'toggle': 'tooltip',
'html': 'true',
'placement': 'top'
},
'title': '<em>Title:' + image.file_name + '</em><hr>',
'class': 'img_preview',
'src': image.FILE_PATH
});
});
$("#mypics").append(images).find('.img_preview').tooltip();
}

请注意，我整理了逻辑，通过使用map()构建一个仅追加一次的 jQuery 对象数组，使其更加简洁。

另请注意，您同时使用FILE_PATH和file_path属性;请确保这是正确的，因为 JS 区分大小写。MyIctures可能也应该MyPictures