Losing jQuery item data on "move"
<p><strong>In essence:</strong> every time I clone items I lose the data() value for those items. </p>

<p><strong>The long story:</strong> I have a three column table that is storing items dynamically entered from a JSON object. Each of these items has a data value set that I use.</p>

<pre><code>$.getJSON(jsonUrl, null, function(data) {
   jsonData = data.items;
   for (var key in jsonData) {
     lZeroArray.each(function() {
       if ($.trim($(this).text()) == $.trim(jsonData[key].name)) {
         $(this).data("L1", jsonData[key].L1);
       }
     });
   };
 });
</code></pre>

<p>there is a click event on these items that uses the JSON data stored as the "L1" key and these work fine but ...</p>

<p>I allow these items to be filtered using a text box and the ":not(:contains('text'))" selector.</p>

<pre><code>$(".subMenuItem:not(:contains('" + str + "'))").remove();
</code></pre>

<p>but ... because I have three columns the columns can be uneven so I attempt to resort the items into the three columns by cloning the remaining ones.</p>

<pre><code>var items = $(".subMenuItem").clone(true);
$("#subMenuContent td").empty();
addItemsToColumn(items);
</code></pre>

<p>After I do this the click functions no longer find any of the data() values even though they workled before.</p>

<pre><code>$(".subMenuItem").live("click", function() {
  if ($(this).data("L1")) {
    buildSubMenuItems($(this).data("L1"));
  }
});
</code></pre>

<p>How do I retain the data() values that I store with an item?</p>
