JQuery avec du contenu dynamique

Question

Si j'avais une balise div dans un répéteur, et je veux ajouter un effet jquery à chacun de ces balises div, comment cela serait-il fait?

   <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é ci-dessus, mais seulement les premiers travaux div. 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 de l'utilisation de jquery ( "div.effect") sélecteur.

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

Answer 2

Les valeurs id sur les éléments HTML sont un validateur . jQuery agit uniquement sur le premier tel élément, parce qu'il attend là pour être une seule.

Si vous passez de id à class, vous devriez avoir 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 semble assez simple et regarder votre jquery, il ne semble pas que cela importe lequel des balises 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 ») comme le sélecteur, qui ne semble pas valable pour moi. Je suggère d'utiliser $ ( 'contenu ui-widget'). Ceci permet de sélectionner basé sur la classe, plutôt que l'identifiant (qui doit être unique comme indiqué par d'autres).

Answer 5

Si vous n'êtes pas vouloir utiliser une classe sur ces divs imbriqués dans votre répéteur, vous pouvez utiliser la correspondance partielle d'ID. Même si le répéteur ajoutera des informations début de votre carte d'identité pour chaque div (pour assurer qu'il est unique), l'ID se termine toujours en « effet », ou quel que soit le nom que vous avez utilisé.

Vous pouvez utiliser à 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 dans « l'effet », donc quand répéteur renomme l'ID de chaque div à « effet ctl001_ repItems_ » ou qu'avez-vous, jQuery trouverez encore.

En outre Prenez note, vers la fin de votre code jQuery figurant dans votre question, vous essayez d'accéder à un div basé sur la classe « effet », au lieu de l'ID. Juste un FYI.