jQuery: éléments clones ET événements

Chaque fois que j'utilise ajax pour créer dynamiquement de nouveaux contenus, de nouvelles .clone(), append (), etc, le nouvel élément perd tous les déclencheurs et les événements, j'ai programmé =(

Après avoir fait la copie, des choses simples qui fonctionnent sur d'autres éléments comme l'ajout d'une classe , sur les éléments copiés ne fonctionnent plus. Tout nouveau contenu ajax ne fonctionne pas. Les boutons de commande ne fonctionnent plus. Que puis-je faire?

Je suis le clonage de ce code HTML, et les boutons de commande ne fonctionnent plus. Style de la portée des éléments qui ne fonctionnent plus sur les éléments CLONÉS:

<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 -->

Nouveaux commentaires ajoutés, 11/03/2011:

OK, j'ai compris le problème et j'ai eu une erreur sur mon jQuery. Maintenant, quand je ajouter .clone( vrai ) PRESQUE tout fonctionne.

Mon nouveau problème est l'UI datepicker.
Après le clonage de l'HTML, quand je clique sur les nouveaux clones du champ date, la priorité va à la (vieille) datefield les données ont été clonés à partir de. De plus, si je sélectionne une date, la valeur va de la vieille datefield -Pas récemment cloné datefield.

Voici mon code ajax (Après un succès submition):

UI datepicker code:

$("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

source d'informationauteur Omar