JQuery avec contenu dynamique

Question

Si j'avais une balise div à l'intérieur d'un répéteur et que je voulais ajouter un effet jquery à chacune de ces balises div, comment cela se ferait-il?

<script type="text/javascript"> 
    $(function() { 
     //run the currently selected effect 
     function runEffect() { 
      //most effect types need no options passed by default 
      var options = {}; 
      //check if it's scale, transfer, or size - they need options 
      //if (selectedEffect == 'scale') { options = { percent: 0 }; } 

      //run the effect 
      $("#effect").effect('explode', options, 500, callback); 
     }; 

     //callback function to bring a hidden box back 
     function callback() { 
      setTimeout(function() { 
      $("#effect:hidden").removeAttr('style').hide().fadeIn(); 
      }, 1000); 
     }; 

     //set effect from select menu value 
     $(document).ready(function() { 
      $("div.effect").click(function() { 
       runEffect(); 
       return false; 
      }); 
     }); 
    }); 
</script> 

<asp:Repeater ID="repItems" runat="server"> 
    <ItemTemplate> 
<div class="toggler"> 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
    <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3> 
    </div> 
</div> 
</ItemTemplate> 
</asp:Repeater> 

J'ai essayé ce qui précède, mais seulement la première div fonctionne. Qu'est-ce que je fais mal??

Answer 1

essayez d'utiliser une classe pour les divs comme:

<div id="effect" class="effect ui-widget-content ui-corner-all"> 

et utilisation jquery ("div.effect") sélecteur.

i « pense » que le même identifiant pour plusieurs choses peut provoquer le problème ...

Answer 2

Les id valeurs sur les éléments HTML sont required to be unique across the entire document. Vous utilisez la même valeur id pour chaque élément que ce répéteur affiche, en violation de cette règle. Maintenant, le web étant ce qu'il est, votre navigateur ne se plaint pas de cela, mais essayez d'exécuter votre HTML rendu via a validator. jQuery n'agit que sur le premier élément de ce type, car il s'attend à ce qu'il n'y ait qu'un seul en.

Si vous passez de id à class, vous devriez obtenir de bien meilleurs résultats.

Answer 3

une autre idée à considérer est de mettre une balise div avec un ID AUTOUR du répéteur. le répéteur lui-même a l'air assez simple et en regardant votre jquery, il ne semble pas que cela importe lequel des tags div dans le répéteur est cliqué.

$(document).ready(function() { 
    $("#base").click(function() { 
    runEffect(); 
    return false; 
    }); 
}); 



<div id="base"> 
    <asp:Repeater ID="repItems" runat="server"> 
     <ItemTemplate> 
    <div class="toggler"> 
     <div id="effect" class="ui-widget-content ui-corner-all"> 
     <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3> 
     </div> 
    </div> 
    </ItemTemplate> 
    </asp:Repeater> 
</div> 

Answer 4

Je pense que ce que vous devez changer est la fonction « prêt » où vous attachez l'événement click - vous utilisez $ (« div.effect ») que le sélecteur, qui ne semble pas valable pour moi . Je suggère d'utiliser $ ('. Ui-widget-content'). Cela sélectionne en fonction de la classe, plutôt que de l'identifiant (qui devrait être unique comme indiqué par d'autres).

Answer 5

Si vous ne souhaitez pas utiliser de classe sur ces divs imbriqués dans votre répéteur, vous pouvez utiliser la correspondance d'ID partielle. Même si le répéteur ajoutera des informations au début de votre identifiant pour chaque div (pour s'assurer qu'il est unique), l'identifiant se terminera toujours en "effet", ou tout autre nom que vous avez utilisé.

Vous pouvez utiliser ceci à votre avantage. Dans votre code jQuery, où vous opérez sur l'ID "effet", changer votre code de ceci:

$("#effect") 

à ceci:

$("[id$='effect']") 

Cela permet de sélectionner tous les éléments dont l'ID END " effect ", donc quand le répéteur renomme l'identifiant de chaque div en" repItems_ ctl001_ effect "ou quoi que ce soit, jQuery le trouvera toujours. Notez également, vers la fin de votre code jQuery répertorié dans votre question, que vous essayez d'accéder à une div basée sur la classe "effet", au lieu de l'ID. Juste un FYI.