JQuery com conteúdo dinâmico

Question

Se eu tivesse uma tag de div dentro de um repetidor e quero adicionar um efeito jQuery a cada uma dessas tags div, como isso seria feito?

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

Eu tentei o acima, mas apenas a primeira div funciona. O que estou fazendo errado??

Answer 1

Tente usar uma classe para aqueles divs como:

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

e no seletor JQuery Use ("Div.Effect").

Eu "acho" que usar o mesmo id para várias coisas pode causar o problema ...

Answer 2

o id Os valores nos elementos HTML são necessário para ser único em todo o documento. Você está usando o mesmo id valor para cada item que o repetidor exibe, violando essa regra. Agora, sendo a web o que é, seu navegador não reclama disso, mas tente executar seu html renderizado através um validador. JQuery apenas age no primeiro elemento desse tipo, porque espera que haja ser apenas um.

Se você mudar de id para class, você deve ter resultados muito melhores.

Answer 3

Outra idéia a considerar é colocar uma tag de div com um ID ao redor do repetidor. O repetidor em si parece bastante direto e, olhando para o seu jQuery, não parece que importa qual das tags de div no repetidor seja clicada.

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

Eu acho que o que você precisa mudar está na função 'pronta', onde você anexa o evento de clique - você está usando $ ('div.f.effect') como o seletor, que não parece válido para mim. Eu sugiro usar $ ('. Content-Content de Ui-Widget'). Isso seleciona com base na classe, em vez do ID (que deve ser único, conforme observado por outros).

Answer 5

Se você não deseja usar uma classe nessas divs aninhadas em seu repetidor, você pode usar a correspondência parcial de ID. Embora o repetidor adicione informações ao início do seu ID para cada div (para garantir que seja único), o ID ainda terminará em "Efeito" ou qualquer nome que você tenha usado.

Você pode utilizar isto para o seu benefício. No seu código jQuery, onde você está operando no ID do "efeito", altere seu código para isso:

$("#effect")

para isso:

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

Isso selecionará todos os elementos cujo ID termina em "Effect"; portanto, quando o repetidor renomear o ID de cada div para "repetir o efeito ctl001_" ou o que você tem, o jQuery ainda o encontrará.

Observe também, no final do seu código jQuery listado em sua pergunta, você está tentando acessar uma div com base na classe "efeito", em vez do ID. Apenas um FYI.