jQuery: éléments clone et des événements

Question

Chaque fois que je l'utilise Ajax pour créer dynamiquement un nouveau contenu, .clone(), append() etc, le nouvel élément desserre les déclencheurs et les événements que je programmés = (

Après avoir fait une copie, simple les choses 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 clone ce HTML, et les boutons de commande ne fonctionnent plus.Le style des éléments span ne fonctionne plus sur les éléments CLONED:

<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, je compris le problème et j'ai eu une erreur sur mon jQuery. Maintenant, quand j'ajoute .clone (true) presque tout fonctionne.

Mon nouveau problème est le datpicker de l'interface utilisateur. Après avoir cloné le code HTML, lorsque je clique sur le champ de date nouvellement cloné, l'accent est mis sur le (ancien) champ date à partir duquel les données ont été clonées. De plus, si je sélectionne une date, la valeur va à l'ancien champ date-pas le champ date nouvellement cloné.

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

UI Code datepicker:

$("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) le tour est joué.

Documentation:. http://api.jquery.com/clone/

Answer 2

Si vos gestionnaires sont configurés en utilisant quelque chose comme $ (» classe ') cliquez sur (...)

Essayez quelque chose comme ceci:. $ (' classe ') .live (' click ', ...)

Live s'applique aux éléments dont la classe n'existe peut-être pas encore.

Answer 3

J'ai finalement obtenu le datepicker de l'interface utilisateur pour fonctionner correctement. J'ai dû complètement supprimer datepicker AVANT le clonage et l'ajouter après les éléments de clonage. Les gars de l'interface utilisateur devraient nous faciliter la tâche. Allez comprendre!

Juste avant le clonage:

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

Après le clonage:

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

Answer 4

Salut, je vais avoir un peu usage semblable cas, j'ai un contenu généré dynamiquement qui contient un bouton , l'événement click répond au bouton d'origine mais pas au bouton généré, Je l'ai déjà fait:

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

mais je résolus mon problème en remplaçant le par vivre comme ceci:

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