Interact with Anchor Tags Created Dynamically Using jQuery

Question

Interact with Anchor Tags Created Dynamically Using jQuery

i am populating my repeater with database values and anchor tags using the code snippet below

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <a href='#Roles' id='<%# DataBinder.Eval(Container.DataItem,"RoleID") %>'>
        <%# DataBinder.Eval(Container.DataItem,"RoleName") %></a>
    </ItemTemplate>
</asp:Repeater>

the resulting output would look something like this

abcd--anchor tag with id=1
efgh--anchor tag with id=2
ijkl--anchor tag with id=3

When one of the anchor tags is clicked, I want to populate a gridview. I'm not sure how to accomplish this in a streamlined manner through a single function as shown below

$(document).ready(function() {
    $('#1').click(function(e) {
        e.preventDefault();
        Logout();

    });
});

Any suggestions on how I can achieve this?

jquery dynamic anchor

Answer 1

Answer №1

To start, assign a specific class to the links within your webpage such as exitlink. Then, opt for jQuery's on() method instead of the traditional click():

$(document).ready(function(){
    $('.exitlink').on('click', function(e) {
        e.preventDefault();
        ExitPage();
    });
});

By doing this, you can capture events from any dynamically generated anchor tags that possess the class="exitlink" attribute.

Answer 2

To start, assign a specific class to the links within your webpage such as exitlink. Then, opt for jQuery's on() method instead of the traditional click():

$(document).ready(function(){
    $('.exitlink').on('click', function(e) {
        e.preventDefault();
        ExitPage();
    });
});

By doing this, you can capture events from any dynamically generated anchor tags that possess the class="exitlink" attribute.

Answer 3

Answer №2

When using a div to contain your repeater, you can use the following code:

$('div.container a').click(function(e) {
    e.preventDefault();
    Logout();
};

Alternatively, you can assign them all a common class like so...

$('.commonclass')

Or you have the option to select specific elements by ID like this:

$('#element1,#element2,#element3')

Was that the information you were looking for?

Answer 4

When using a div to contain your repeater, you can use the following code:

$('div.container a').click(function(e) {
    e.preventDefault();
    Logout();
};

Alternatively, you can assign them all a common class like so...

$('.commonclass')

Or you have the option to select specific elements by ID like this:

$('#element1,#element2,#element3')

Was that the information you were looking for?

Interact with Anchor Tags Created Dynamically Using jQuery

Answer №1

Answer №2

Similar questions

Creating a progress bar for file uploads without using jQuery

Create an input field with a dynamic and exclusive identifier using the DataTables plugin

Having Trouble Styling Radio Buttons with CSS

Ajax activates a slider

How can we utilize dynatree.js lazy loading to eliminate null child nodes (i.e., every final node in a branch is null)?

Deactivating elements on a website

Barba.js (Pjax.js) and the power of replacing the <head> tag

Can JavaScript be used to dynamically update drop down lists in a gridview?

The resource was identified as a document but was sent using the MIME type application/json

Enhancing user interfaces with jQuery by updating DOM elements

Finding the title of a checkbox within a specific row

Issue with disabling checkboxes in jsTree

Incorrectly colored buttons upon clicking

Tips for obtaining the resource id while creating a new event in fullcalendar

Display a variety of body background images depending on the user's selection

Leveraging deferred for linking loops involving several ajax requests

The script fails to execute on content loaded through AJAX in Django

Ways to extract the initial layer of information from a JSON document

.NET MVC - Preventing Ajax.BeginForm from being compromised

Styling for jQuery mobile panels disappears when used on multiple pages