Javascript 更新表数据后，不再显示jQuery工具提示

我有一个表，在td中有一个跨度元素

<table>
    <tbody>
        <tr>
            <td id="td">
                <span id="span1">this is span1</span>
            </td>
        </tr>
    </tbody>
</table>

我通过连接添加id为“span2”的第二个span来更新td的内容

var tdHtml = $('#td').html();
tdHtml+="<br> <span id=\"span2\">this is span2</span>"
$('#td').html(tdHtml);

但是，更新td内容后，span1的工具提示不再显示。为什么?

请看一个JSFIDLE示例

---

非常感谢您的回答。

您应该使用append，现在您正在删除并重新添加span1（并删除以前添加的行为）

$（'#td'）。追加（
这是span2”）；

---

这似乎是因为您将现有代码视为HTML，而DOM引用丢失了。如果改为附加一个DOM片段，它将起作用

var newSpan = $('<span id="span2">this is span2</span>');
$('#td').append(newSpan);

var newSpan=$（'this is span2'）；
$（'#td'）。追加（新闻栏）；

有关完整代码，请参见此小提琴：

$('#span2').tooltip({
    content: function(){
        return "tooltip_span2";
    },
    items: $('#span2')
});

$('#td').append("<br> <span id=\"span2\">this is span2</span>");

var newSpan = $('<span id="span2">this is span2</span>');
$('#td').append(newSpan);