title: jQuery - events won't fire for dynamically created tab elements
body: <p>I am using <a href="http://docs.jquery.com/UI/Tabs" rel="nofollow noreferrer">jQuery UI Tabs</a>.</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul id="tablist"&gt;
      &lt;li&gt;&lt;a href="#fragment-1"&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a button that adds new tabs. I use the following code:</p>
  
  <pre><code>var newTabId = $('#tabs').tabs('option', 'selected') + 1;    
  $('#tabs').tabs("add",'someUrl.htm','New Tab',newTabId);
  </code></pre>
  
  <p>(Tab will be added next to the currently selected tab)</p>
  
  <p>Now none of the newly added tabs fire any events such as a click or hover</p>
  
  <pre><code>$('#tablist li').click(function(){
      alert('test message');
  });
  </code></pre>
  
  <p>But events fire properly for the tabs that were there in the initial source code.</p>
  
  <p>How to resolve?</p>