JQuery mit dynamischem Inhalt

Question

Wenn ich einen div-Tag in einem Repeater hatte, und ich mag einen jquery Effekt jedem dieser div-Tags hinzuzufügen, wie das geschehen würde?

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

habe ich versucht, die oben, aber nur die erste div funktioniert. Was mache ich falsch ??

Answer 1

versuchen, eine Klasse für diese divs verwenden wie:

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

und in jQuery ( "div.effect") Selektor.

i „denken“, dass die gleiche ID für mehrere Dinge verwenden könnte das Problem verursachen ...

Answer 2

Die id Werte auf HTML-Elemente sind ein Validator . jQuery wirkt nur auf den ersten solches Element, weil es dort erwartet, sein nur einen.

Wenn Sie von id zu class wechseln, sollten Sie viel bessere Ergebnisse haben.

Answer 3

eine andere Idee zu prüfen, ist ein div-Tag mit einem id rund um den Repeater zu setzen. der Repeater selbst sieht ziemlich einfach und Blick auf Ihren jquery, es scheint nicht, dass es welche der div-Tags in dem Repeater zählt, angeklickt wird.

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

Ich denke, was Sie ändern müssen in der ‚ready‘ Funktion ist, wo Sie das Click-Ereignis anhängen - Sie verwenden $ ( ‚div.effect‘) als Wähler, die mir nicht aussehen gültig. Ich schlage vor, $ mit ( 'ui-Widget-content'). Dies wählt auf der Klasse basiert, anstatt die ID (die eindeutig sein sollte, wie andere schon angemerkt).

Answer 5

Wenn Sie sich nicht auf diesem divs in Ihrem Repeater verschachtelt verwenden, um eine Klasse zu wollen, können Sie teilweise ID-Abgleich verwenden. Auch wenn der Repeater Informationen zu Beginn Ihrer ID für jedes div hinzufügen wird (um sicherzustellen, dass es einzigartig ist), wird immer noch die ID im „Effekt“ beenden, oder einen beliebigen Namen verwendet haben.

Sie können diese zu Ihrem Vorteil nutzen. In Ihrem jQuery-Code, wo Sie Betrieb auf der „Effekt“ ID, Ihren Code ändern aus diesem:

$("#effect")

folgt aus:

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

Damit werden alle Elemente auswählen, deren ID-END in „Wirkung“, so dass, wenn Repeater die ID jedes div auf „repItems_ ctl001_ Effekt“ umbenennt oder was Sie haben, wird jQuery es immer noch finden.

Auch Notiz tun, gegen Ende des Codes jQuery aufgeführt in Ihrer Frage, Sie versuchen, einen div auf der Klasse „Effekt“ auf der Grundlage zuzugreifen, anstelle der ID. Nur ein FYI.