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);

（选项卡将添加到当前所选标签旁边）

现在，没有新添加的标签会触发任何事件，例如点击或悬停

$('#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)将克隆项并保持它与事件的绑定。