JQuery con contenuti dinamici

Question

Se avessi un tag div all'interno di un ripetitore, e voglio aggiungere un effetto jQuery per ognuno di quei tag div, come vorrei che sia fatta?

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

ho provato quanto sopra, ma solo i primi lavori div. Che cosa sto facendo di sbagliato ??

Answer 1

provare a utilizzare una classe per quei div come:

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

ed in uso jquery ( "div.effect") selettore.

i "credo" che utilizzando lo stesso ID per le cose più potrebbe causare il problema ...

Answer 2

I valori id su elementi HTML sono richiesto per essere unico in tutto il documento intera . Stai usando lo stesso valore id per ogni elemento che che i display ripetitori, in violazione di tale regola. Ora, il web è quello che è, il tuo browser non si lamenta di questo, ma provare a eseguire il codice HTML reso attraverso un validatore . jQuery agisce solo sul primo tale elemento, perché si aspetta lì per essere unico.

Se si passa dalla id a class, si dovrebbe avere risultati molto migliori.

Answer 3

un'altra idea di prendere in considerazione è quella di mettere un tag div con un id intorno al ripetitore. il ripetitore stesso sembra piuttosto semplice e guardando il tuo jQuery, non sembra che sia importante che i tag div del ripetitore viene cliccato.

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

Credo che ciò che è necessario cambiare è nella funzione di 'pronto' in cui si allega l'evento click - si utilizza $ ( 'div.effect') come selettore, che non sembra valida a me. Io suggerisco di usare $ ( 'ui-widget di contenuto'). Questo seleziona basa sulla classe, piuttosto che l'id (che dovrebbe essere unico come notato da altri).

Answer 5

Se non hai intenzione di usare una classe su quelle div annidati nel vostro ripetitore, è possibile utilizzare la corrispondenza ID parziale. Anche se il ripetitore aggiungere informazioni a inizio del vostro ID per ogni div (per assicurarsi che sia unico nel suo genere), l'ID sarà ancora finire in "effetto", o qualsiasi altro nome che hai utilizzato.

È possibile utilizzare questo a vostro vantaggio. Nel codice jQuery, in cui si opera sulla "effetto" ID, modificare il codice da questo:

$("#effect")

a questo:

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

Questo selezionerà tutti gli elementi la cui END ID nel "effetto", in modo che quando ripetitore rinomina l'ID di ogni div a "repItems_ ctl001_ effetto" o quello che hai, jQuery sarà ancora trovare.

Inoltre faccio notare, verso la fine del codice jQuery elencato nella sua interrogazione, si sta tentando di accedere ad un div in base alla classe "effetto", anziché l'ID. Solo una cronaca.