---
title: "How to select a div in an asp.net repeater"  
description: "How to select a div in an asp.net repeater"  
author: "Lillian Martin"  
published: 2014-12-21  
updated: 2014-12-22  
canonical: https://www.mindstick.com/forum/12800/how-to-select-a-div-in-an-asp-dot-net-repeater  
category: "asp.net"  
tags: ["c#"]  
reading_time: 3 minutes  

---

# How to select a div in an asp.net repeater

I have a div inside an [asp.net](https://www.mindstick.com/articles/934/default-folders-available-inside-the-asp-dot-net-application-folder) [repeater](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control). I would like to handle an event on the [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side) when a [user clicks](https://answers.mindstick.com/qa/34556/if-a-user-clicks-all-the-google-ads-on-my-site-is-it-foul) on one of the div's.

I've tried the [onClick](https://www.mindstick.com/forum/12718/onclick-for-hyperlink) handler in the div (class="result"), but that doesn't seem to be firing. Is there another event I can tie this too?

I also try creating an [event handler](https://www.mindstick.com/forum/1371/c-sharp-dot-net-event-handler-delegate-question) using jquery, but I'm not sure how to select the element that the user clicks. [Right now](https://answers.mindstick.com/qa/36863/what-would-happen-if-gravity-became-5-percent-stronger-right-now), I seem to be tying the event to all the div's. Any idea how I can fix the jquery [selector](https://www.mindstick.com/interview/23419/action-selector-in-mvc) for the a single [div element](https://www.mindstick.com/forum/34450/remove-div-element)?

```
My repeater: <div id="search-results" >    <asp:Repeater ID="pageResults" runat="server" ItemType="ArchiveViewer.Logic.PageResult"         SelectMethod="GetSearchResults" OnItemDataBound="pageResults_ItemDataBound" >             <ItemTemplate>                 <div class="result" data-pageid="<%#:Item.PageId %>" data-pageNumber="<%#:Item.Number %>"                    onclick="resultSelected"  >                        <div>                            Page: <%#:Item.Number %>                        </div>                          <div>                          <asp:Label ID="lblSearchResult" runat="server" ></asp:Label>                        </div>                                                         </div>             </ItemTemplate>     </asp:Repeater></div>
```

## And my jquery scripts:

```
$('#search-results div').click(function (e) {        $(this).removeClass('active');        $(this).addClass('active');        // this is setting the active class for all the div's in the repeater...}); var resultSelected = function () {        // this is not working};
```

## Replies

### Reply by Anonymous User

There are a few things you need to change to make this work. Your repeater produces html similar to this:

```
<div id="search-results">    <div class="result" onclick="resultSelected();">        <div>result</div>        <div>some label</div>    </div>    <div class="result" onclick="resultSelected();">        <div>result</div>        <div>some label</div>    </div></div>
```

You need to remove the active class on all divs, but only add it to the clicked div:

```
$("#search-results div.result").click(function(){    $("div").removeClass("active");    $(this).addClass("active");}); resultSelected = function(){    console.log("clicked, but don't really need this...");}
```

If you wanted to add the onclick [handler](https://www.mindstick.com/forum/33532/handler-pagehandlerfactory-integrated-has-a-bad-module-managedpipelinehandler-in-its-module-list) to the html you need to change it to be calling a function via () at the end of the name. You also need to change the script to declare the function without defining it as a var. There is no reason to do this though if you are using jQuery.

### Reply by Anurag Sharma

Your first jQuery script actually looks OK... except all it will ever do is apply the class active to a div. So when you click a 2nd div, now you have two divs with class active, and a 3rd you have three, etc...

What you want to do is clear out all the other active classes when you click:

```
$('#search-results div').click(function (e) {    $('#search-results div').each(function () {        $(this).removeClass('active');    });    $(this).addClass('active');});
```

This would be essentially the same as if you just applied a click event to all the divs with class="result". You'll be better off removing the inline onclick that you have in your repeater divs. Then you can call subsequent functions like:

```
$('#search-results div.result').on('click', function () {    var pageNumber = ($(this).attr('data-pageNumber'));    console.log('Fetched ' + pageNumber);    if (pageNumber != null) {        $('#search-results div.result').each(function () {             $(this).removeClass('active');        });         //add the active class and click handler        $(this).addClass('active');        getHighlightResults(pageNumber); //call getHighlightResults with pageNumber        activeDivAction(this); // call activeDivAction passing the div that was clicked    }}); var getHighlightResults = function (pageNumber) {    // Do some stuff    console.log('inside getHighlightResults for ' + pageNumber); }; var activeDivAction = function(activeDiv) {   var pageNumber = ($(activeDiv).attr('data-pageNumber'));   console.log('inside activeDivAction for ' + pageNumber);};
```


---

Original Source: https://www.mindstick.com/forum/12800/how-to-select-a-div-in-an-asp-dot-net-repeater

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.