title: jQuery: clone elements AND events
body: <p>Whenever I use ajax to dynamically create new content, .clone(), append() etc, the new element looses any triggers and events I programmed =(</p>
  
  <p>After making copy, simple things that WORK on other elements like adding a class to , on the copied elements no longer work. Any new ajax content does not work. Command buttons no longer work. What can I do?</p>
  
  <p>I am cloning this HTML, and the command buttons no longer work. Styling the span elements no longer work on the CLONED elements:</p>
  
  <pre><code>&lt;div name="shows" id="x"&gt;&lt;br/&gt; &lt;!-- The ID depends on the database--&gt;
      &lt;div name="shows" id="x"&gt;
          ID: &lt;input disabled="disabled" size="7" value="x" name="id" /&gt;
          Status: 
          &lt;select name="status" &gt;
            &lt;option selected="selected" &gt;Display&lt;/option&gt;
            &lt;option &gt;Hide&lt;/option&gt;
          &lt;/select&gt;
          &lt;br/&gt;&lt;br/&gt;
          &lt;span class="required" id="date_txt"&gt;*Date: &lt;/span&gt;&lt;input type="text" value="" name="date" /&gt;
          &amp;nbsp;&amp;nbsp;
          &lt;span class="required" id="title_txt"&gt;*Title: &lt;/span&gt;&lt;input type="text" size="65" value="" name="title" /&gt;
          &lt;br/&gt;
          &lt;span class="required" id="venue_txt"&gt;*Venue: &lt;/span&gt;&lt;input type="text" size="45" value="" name="venue" /&gt;
          Telephone: &lt;input type="text" value="" name="tel" /&gt;
          &lt;br/&gt;
          URL: &lt;input type="text" size="100" value="" name="url" /&gt;
          &lt;br/&gt;&lt;br/&gt;
          Address: &lt;input type="text" size="45" value="" name="address" /&gt;
          &amp;nbsp;&amp;nbsp;
          &lt;span class="required" id="city_txt"&gt;*City: &lt;/span&gt;&lt;input type="text" value="" name="city" /&gt;
          &lt;br/&gt;
          State: &lt;input type="text" value="" name="state" /&gt;
          ZIP: &lt;input type="text" value="" name="zip" /&gt;
          &lt;span id="country_txt"&gt;*Country: &lt;/span&gt;&lt;input type="text" value="United States" name="country" /&gt;
          &lt;br/&gt;
          &lt;br/&gt;Comments: &lt;br/&gt;
          &lt;textarea cols="80" rows="8" name="comments" &gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;!-- START OF:commands  --&gt;
      &lt;div id="commands" &gt;
          &lt;button name="edit" id="edit" &gt;Edit&lt;/button&gt; 
          &lt;button name="delete" id="delete" &gt;Delete&lt;/button&gt;
      &lt;br /&gt;
      &lt;hr /&gt;
      &lt;br /&gt;
      &lt;/div&gt;
      &lt;!-- END OF:commands  --&gt;
  &lt;/div&gt;
  &lt;!-- END OF:new --&gt;
  </code></pre>
  
  <p>New comments added, 11/03/2011:
  <br/><br/></p>
  
  <p>OK, I figured out the problem and I had an error on my jQuery. Now, when I add .clone( true ) ALMOST everything works.</p>
  
  <p><br/>
  My new problem is the UI datepicker.
  After cloning the HTML, when I click on the newly cloned date field, the focus goes to the (old) datefield the data was cloned from. More over, if I select a date, the value goes to the old datefield -Not the newly cloned datefield.</p>
  
  <p>Here is my ajax code (After a successful submition):</p>
  
  <p>UI datepicker code:</p>
  
  <pre><code>$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code>    ...ajax code...
  function(data)
  {
  var $msg = eval(data);
  if( $msg[0] == 1 )
      {
      //#var.new
          $id = '#'+$msg[1];
          $data = $("#new");
      $new = $data.clone(true);
      $new.find('input.datefield').datepicker();
  
  
          $new.attr("id", $id);
          $new.children('[name="id"]').val($id);
          $new.children('[name="id"]').attr("value", $id);
          $new.children(":input").each(function() { var $value = $(this).val(); $(this).attr("value", $value); });
          $new.prepend( "&lt;br/&gt;" );
  
          $commands = $("#blank").children("#commands").clone(true);
          $commands.children("#add").text("Update");
          $commands.children("#add").attr("pk", $id);
          $commands.children("#add").attr("name", "update");
          $commands.children("#add").attr("id", "update");
  
          $commands.children("#reset").text("Delete");
          $commands.children("#reset").attr("pk", $id);
          $commands.children("#reset").attr("name", "delete");
          $commands.children("#reset").attr("id", "delete");
  
          $new.append( $commands );
  
          //#animation
          //blank.slideUp
          $("#blank").slideUp(2500, function(){
          $("#ADDNEW").html("&amp;#9658; New:");
          //$("#blank").clone().prependTo( $("#active") );
          //$("#blank").prependTo( "#active" );
  
          //active.slideUp
          $("#active").slideUp("slow", function(){
          $("#ON").html("&amp;#9658; Active:");
          $("#active").prepend( $new );
          $('#reset').trigger('click');
  
          //active.slideDown
          $("#active").slideDown(8500, function(){
          $("#ON").html("&amp;#9660; Active:");
  
          //blank.slideDown
          $("#blank").slideDown(3500, function(){
          $("#ADDNEW").html("&amp;#9660; New:");
          load_bar(0);
  
          }); //end: anumation.#blank.slideDown
          }); //end: anumation.#active.slideDown
          }); //end: anumation.#blank.slideUp
          }); //end: anumation.#active.slideUp
  
          //$("#new").fadeOut(2000, function(){
          //START: blank
          //alert( $("#blank").html() );
          //$dad = $("#new");
          //$dad.children('input[name!="id"][name!="country"], textarea').val('');
          //$dad.children('[name="country"]').val("United States");
          //$dad.children('[name="date"]').focus();
          //END: blank
          //$("#new").fadeIn(2000, function(){
          //alert( $msg );
          //}); //end: anumation.fadeIn
          //}); //end: anumation.fadeOut
          } //end: if
      else
          {
          //var varMSG = data;
          //alert( "Hello" );
          alert( $msg );
  
          //$("#add").attr("disabled", false);
          //$("#reset").attr("disabled", false);
          load_bar(0);
          } //end: if.else
      }//end: $.post.function
  ); //END:$.post
  }); 
  //END:ajax
  </code></pre>