JQuery with dynamic content - asp.net

Question

If I had a div tag inside a repeater, and i want to add a jquery effect to every one of those div tags, how would that be done?
<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>
I tried the above, but only the first div works. What am i doing wrong??

Answer 1

try using a class for those divs like:
<div id="effect" class="effect ui-widget-content ui-corner-all">
and in jquery use ("div.effect") selector.
i "think" that using the same id for multiple things might cause the issue...

Answer 2

The id values on HTML elements are required to be unique across the entire document. You're using the same id value for each item that that repeater displays, in violation of that rule. Now, the web being what it is, your browser doesn't complain about that, but try running your rendered HTML through a validator. jQuery only acts on the first such element, because it expects there to be only one.
If you switch from id to class, you should have much better results.

Answer 3

another idea to consider is to put a div tag with an id AROUND the repeater. the repeater itself looks pretty straightforward and looking at your jquery, it doesn't appear that it matters which of the div tags in the repeater is clicked.
$(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

I think what you need to change is in the 'ready' function where you attach the click event - you are using $('div.effect') as the selector, which does not look valid to me. I suggest using $('.ui-widget-content'). This selects based on the class, rather than the id (which should be unique as noted by others).

Answer 5

If you're not wanting to use a class on those divs nested in your repeater, you can use partial ID matching. Even though the repeater will add information to beginning of your ID for each div (to ensure it's unique), the ID will still end in "effect", or whatever name you've used.
You can use this to your advantage. In your jQuery code, where you're operating on the "effect" ID, change your code from this:
$("#effect")
to this:
$("[id$='effect']")
This will select all elements whose ID END in "effect", so when repeater renames the ID of each div to "repItems_ ctl001_ effect" or what have you, jQuery will still find it.
Also do note, toward the end of your jQuery code listed in your question, you're attempting to access a div based on the class "effect", instead of the ID. Just an FYI.