jQuery: elementos y eventos clon

Question

Siempre que uso ajax para crear dinámicamente nuevos contenidos, .clone(), append() etc, el nuevo elemento pierde ningún disparadores y eventos Programé = (

Después de hacer copia, simple las cosas que FUNCIONAN en otros elementos, como agregar una clase, en los elementos copiados ya no funcionan. Cualquier contenido nuevo de ajax no funciona. Los botones de comando ya no funcionan. ¿Qué puedo hacer?

Estoy clonando este HTML, y los botones de comando ya no funcionan. El estilo de los elementos del tramo ya no funciona en los elementos CLONADOS:

<div name="shows" id="x"><br/> <!-- The ID depends on the database--> 
    <div name="shows" id="x"> 
     ID: <input disabled="disabled" size="7" value="x" name="id" /> 
     Status: 
     <select name="status" > 
      <option selected="selected" >Display</option> 
      <option >Hide</option> 
     </select> 
     <br/><br/> 
     <span class="required" id="date_txt">*Date: </span><input type="text" value="" name="date" /> 
     &nbsp;&nbsp; 
     <span class="required" id="title_txt">*Title: </span><input type="text" size="65" value="" name="title" /> 
     <br/> 
     <span class="required" id="venue_txt">*Venue: </span><input type="text" size="45" value="" name="venue" /> 
     Telephone: <input type="text" value="" name="tel" /> 
     <br/> 
     URL: <input type="text" size="100" value="" name="url" /> 
     <br/><br/> 
     Address: <input type="text" size="45" value="" name="address" /> 
     &nbsp;&nbsp; 
     <span class="required" id="city_txt">*City: </span><input type="text" value="" name="city" /> 
     <br/> 
     State: <input type="text" value="" name="state" /> 
     ZIP: <input type="text" value="" name="zip" /> 
     <span id="country_txt">*Country: </span><input type="text" value="United States" name="country" /> 
     <br/> 
     <br/>Comments: <br/> 
     <textarea cols="80" rows="8" name="comments" ></textarea> 
    </div> 
    <!-- START OF:commands --> 
    <div id="commands" > 
     <button name="edit" id="edit" >Edit</button> 
     <button name="delete" id="delete" >Delete</button> 
    <br /> 
    <hr /> 
    <br /> 
    </div> 
    <!-- END OF:commands --> 
</div> 
<!-- END OF:new --> 

nuevos comentarios añadidos, 11/03/2011:

OK, me di cuenta del problema y que ha habido un error en mi jQuery. Ahora, cuando agrego .clone (true) CASI todo funciona.

Mi nuevo problema es el UI datepicker. Después de clonar el HTML, cuando hago clic en el campo de fecha recién clonado, el foco va al (antiguo) campo de fecha desde el que se clonaron los datos. Además, si selecciono una fecha, el valor va al campo de fecha anterior, no al campo de fecha recién clonado.

Aquí está mi código Ajax (Después de una exitosa submition):

IU código de selector de fechas:

$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true}); 

Ajax:

...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("<br/>"); 

     $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("&#9658; New:"); 
     //$("#blank").clone().prependTo($("#active")); 
     //$("#blank").prependTo("#active"); 

     //active.slideUp 
     $("#active").slideUp("slow", function(){ 
     $("#ON").html("&#9658; Active:"); 
     $("#active").prepend($new); 
     $('#reset').trigger('click'); 

     //active.slideDown 
     $("#active").slideDown(8500, function(){ 
     $("#ON").html("&#9660; Active:"); 

     //blank.slideDown 
     $("#blank").slideDown(3500, function(){ 
     $("#ADDNEW").html("&#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 

Answer 1

.clone(true) hace el truco.

Documentación: http://api.jquery.com/clone/

Answer 2

Si sus controladores están configurados usando algo como $ ('. Clase ') haga clic en (...)

intentar algo como esto en su lugar:.. $ (' clase ') .live (' clic ', ...)

Live se aplica a elementos de la clase que pueden no existir aún.

Answer 3

Finalmente conseguí que el marcador de fecha de la UI funcionara correctamente. Tuve que eliminar completamente datepicker ANTES de clonar y agregarlo DESPUÉS de clonar elementos. Los muchachos de UI deberían facilitarnos las cosas. ¡Imagínate!

Justo antes de la clonación:

//#datepicker 
$("input[name='date']").datepicker("destroy"); 
$("input[name='date']").removeClass("hasDatepicker").removeAttr('id'); 

Después de la clonación:

$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true}); 

Answer 4

Hola estoy teniendo un caso poco uso similar, tengo algo de contenido generado dinámicamente que contiene un botón , haga clic en evento está respondiendo al botón original, pero no el generado, He hecho antes:

$('.someclass').on('click', function() { 

pero resolví mi problema reemplazando el encendido por vivo como esto:

$('.someclass').live('click', function() {