jQuery - 事件不會爲動態創建的選項卡元素觸發

Question

我正在使用jQuery UI Tabs。

<div id="tabs"> 
<ul id="tablist"> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
</ul> 
</div> 

我有一個添加新選項卡的按鈕。我使用下面的代碼：

var newTabId = $('#tabs').tabs('option', 'selected') + 1;  
$('#tabs').tabs("add",'someUrl.htm','New Tab',newTabId); 

（Tab鍵將被旁邊的當前選擇的選項卡中添加）

現在沒有新添加的標籤觸發任何事件，如點擊或懸停

$('#tablist li').click(function(){ 
    alert('test message'); 
}); 

但事件會爲初始源代碼中的選項卡正確觸發。

如何解決？

Answer 1

改爲使用live。

$('#tablist li').live('click', function(){ 
    alert('test message'); 
}); 

或者更好的是，delegate事件如預期

$('#tablist').delegate('li', 'click', function(){ 
    alert('test message'); 
}); 

Answer 2

您可能需要將元素綁定到事件創建時，如果它有任何興趣.clone(true)將克隆項目並保持它與事件綁定。