JQuery con contenido dinámico

Question

Si tuviera una etiqueta div dentro de un repetidor, y quiero añadir un efecto de jQuery para cada una de esas etiquetas div, ¿cómo podría hacerse eso?

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

He intentado todo lo anterior, pero sólo los primeros trabajos div. ¿Qué estoy haciendo mal ??

Answer 1

intente usar una clase para los divs como:

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

y en uso jquery ( "div.effect") selector.

i "pensar" que utilizando el mismo ID para múltiples cosas podría causar el problema ...

Answer 2

Los valores id sobre elementos HTML son requerida para ser únicos en todo el documento . Usted está utilizando el mismo valor id para cada elemento que muestra que los repetidores, en violación de esa regla. Ahora, siendo la web lo que es, su navegador no se queja de eso, sino que intente ejecutar el HTML representado a través un validador . jQuery sólo actúa sobre el primer elemento, ya que espera que haya ser único.

Si cambia de id a class, usted debe tener mucho mejores resultados.

Answer 3

Otra idea a considerar es poner una etiqueta div con un id alrededor de la repetidor. el repetidor en sí parece bastante sencillo y mirando a su jQuery, no parece que importe cuál de las etiquetas div en el repetidor se hace clic.

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

Creo que lo que necesita es un cambio en la función 'listo' donde se conectan el evento click - está utilizando $ ( 'div.effect') como selector, que no parece válida para mí. Sugiero utilizar $ ( 'ui-Reproductor-contenido'). Esto selecciona en base a la clase, en lugar de la ID (que debe ser único según lo observado por otros).

Answer 5

Si no está queriendo utilizar una clase en esos divs anidados en su repetidor, se puede utilizar la concordancia de ID parcial. A pesar de que el repetidor añadir información a partir de su identificación para cada div (para asegurarse de que es única), el ID será todavía terminar en "efecto", o el nombre que ha utilizado.

Se puede usar esto para su ventaja. En su código jQuery, donde se está operando en el "efecto" Identificación, cambie su código de esto:

$("#effect")

a esto:

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

Esto seleccionará todos los elementos cuya FIN Identificación de "efecto", por lo que cuando repetidor cambia el nombre del ID de cada div a "repItems_ efecto ctl001_" o lo que sea, jQuery todavía encontrarlo.

También hacer nota, hacia el final de su código jQuery que aparece en su pregunta, usted está tratando de acceder a un div basado en el "efecto" de clase, en lugar de la ID. Sólo una intensa.