Question

我在td中有一个包含单个span元素的表。

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

我为span1创建了一个jQuery工具提示。

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

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

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

我为span2添加了一个工具提示，它将正确显示。

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

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

请参阅jsFiddle示例here。

非常感谢您的回答。

Answer 1

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

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

http://jsfiddle.net/dy7pq/2/

Answer 2

看起来是因为您将现有代码视为HTML并且DOM引用丢失了。如果您追加DOM片段，它将起作用。

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

请参阅此小提琴，了解完整代码：http://jsfiddle.net/harveyramer/b3xGM/1/

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

2 个答案: