title: jQuery UI sortable and live() click problem -- need to click twice after sorting for click to register
body: <p>I have a table I'm using jQuery UI's "sortable" on. In the table, I have rows consisting of a "drag handle" to grab and reorder the table, and cells with clickable items, like this:</p>
  
  <pre><code>&lt;table id="test-table"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td class="handle"&gt;&lt;div class="ui-icon ui-icon-arrowthick-2-n-s" /&gt;&lt;/td&gt;
          &lt;td class="clickycell"&gt;&lt;a href="#"&gt;Testing 1&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="handle"&gt;&lt;div class="ui-icon ui-icon-arrowthick-2-n-s" /&gt;&lt;/td&gt;
          &lt;td class="clickycell"&gt;&lt;a href="#"&gt;Testing 2&lt;/a&gt;&lt;/td&gt;&lt;/td&gt;
      &lt;tr&gt;
          &lt;td class="handle"&gt;&lt;div class="ui-icon ui-icon-arrowthick-2-n-s" /&gt;&lt;/td&gt;
          &lt;td class="clickycell"&gt;&lt;a href="#"&gt;Testing 3&lt;/a&gt;&lt;/td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In my code, I make the table sortable, and also use jQuery's <code>live()</code> to bind a click event to the clickable items, like this:</p>
  
  <pre><code>$(function() {
      /*
         Using live() because in my real code table rows are dynamically added.
         However, if I use click() instead, as in the commented-out code, it works
         fine, without any need to click twice.
  
      */
      // $(".clickycell a").click(function() {
      $(".clickycell a").live('click', function() {
          alert("Successful click");
          return false;
      });
      $("#test-table tbody").sortable({
          handle: "td.handle", /* Use the draggy handle to move, not the whole row */
          cursor: "move"
      });
  });
  </code></pre>
  
  <p>I'm using <code>live()</code> because rows can be dynamically added to the table in the real code.</p>
  
  <p>My problem is this: if I click on any of the clickable items before sorting, they work fine. After the user drags the rows to reorder them, though, I have to click <em>twice</em> for a click to register. After that second click, the clickable items go back to "normal", needing only one click, until the next time rows are dragged around.</p>
  
  <p>If I use <code>click()</code> rather than <code>live()</code> -- as in the commented-out code -- then a single-click works fine at all times, but I'd rather use <code>live()</code>, as I said. And I'm curious as to why it's not working.</p>
  
  <p>There's <a href="http://jsfiddle.net/U6sgM/4/" rel="nofollow noreferrer">a live jsFiddle example here</a>. Try dragging a row into a different position, then clicking on any of the "Testing..." links. In Firefox, at least, I need to click twice to get the "Successful click" alert.</p>
  
  <p>Any ideas?</p>