enfants jQuery de l'élément cloné ne répond pas à des événements

Question

Résumé

J'utilise jQuery pour cloner un div (« boxCollection ») contenant des groupes (« GroupBox ») dont chacun contient un ensemble d'entrées. Les entrées ont des événements de modification liés à $(document).ready, mais les entrées à l'intérieur des divs clonées ne répondent pas aux déclencheurs d'événement. Je ne peux pas obtenir cela pour travailler dans IE7, IE8 ou FF3.

Voici mon exemple de code:

HTML:

<div class="boxCollection"><div class="groupBox" id="group_1"><input type="text"></input></div></div> 

événements jQuery:

$(".groupBox[id*='group']").change(function(){ 
    index = $(this).attr("id").substring(6); 
    if($("input[name='collection_"+index+"']").val() == "") 
    { 
     $("input[name='collection_"+index+"']").val("Untitled Collection "+index); 
    } 
}); 

déclaration clone jQuery:

$(".boxCollection:last").clone(true).insertAfter($(".boxCollection:last")); 

Answer 1

Utilisez live() pour mettre automatiquement les gestionnaires d'événements sur des éléments créés dynamiquement:

$(".groupBox[id*='group']").live("change", function() { 
    ... 
}); 

Vous semblez mettre un gestionnaire d'événements change() sur un <div> cependant (en fonction de votre échantillon HTML). Aussi, je recommande de ne pas utiliser un sélecteur d'attribut pour cela. Vous lui avez donné une classe à la place:

$("div.groupBox ...")... 

Enfin, vous essayez d'attribuer un nom unique à chaque entrée de texte. Vous ne dites pas ce que votre technologie côté serveur est mais beaucoup (la plupart?) Traitera mieux que cela. En PHP par exemple, vous pouvez faire:

Et $_POST contiendra un élément « boîte » avec un tableau de trois valeurs.

Answer 2

Je ne sais pas si cela va fonctionner, mais je vais donner un coup de feu et dire que vous devez attribuer des événements en direct

$(".groupBox[id*='group']").live('change', function() { }); 

Vous aurez probablement un problème avec change et live dans IE6/7, donc je vous conseille d'utiliser le plugin livequery pour résoudre ce problème.