jQuery工具提示在更新表格數據後不再顯示

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'的td。

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

你應該使用追加，現在要刪除並重新添加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/