How can I dynamically set a CSS class on a JQuery template?

I am developing a project using asp.net web api and incorporating jquery template within it.

while ready
$('a').click(function () {
            debugger;
            // removing the selected class from all anchors
            $('.row a').removeClass('selected');

            // Adding the selected class to the currently clicked anchor
             $(this).addClass('selected');            
        });

<div class="row">
            <div class="span3">
                <!-- Injecting dynamic data from script GroupTypeTemplate -->              
            </div>
</div>
<script id="GroupTypeTemplate" type="text-html">
                <nav id="options" class="work-nav">
                    <ul id="filters" class="option-set" data-option-key="filter">                                            
                         <li>                            
 <a onclick="getGroupById('${Id}')"  data-option-value="*">${TypeName}</a>
                         </li>
                    </ul>
                </nav>                 
                </script>

I wish to dynamically set the class attribute based on the active menu item

How can I determine which id is currently active so that I can assign class="selected" accordingly?

What is the appropriate syntax to achieve this in jquery template?

javascriptjquerycssasp.net-mvc-4

Answer №1

Only the a element that has been clicked will have the selected attribute added to it.

$("a").click(function(){
    $("a").removeClass("selected");
    $(this).addClass("selected");
});

Answer №2

For the script to work on dynamically inserted content, you must attach the event to the document as shown below:

$(document).on('click', 'a', function(){
    //Your code here
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on choosing a button and applying custom styles with emotion styles in MUI

Looking to apply a margin-right to my button. Currently utilizing mui 5 with Button variant='contained'. I created a custom CSS style using the styled component in mui and targeted the Box. const Wrapper = styled(Box)({ display: 'flex&ap ...

htmlcssmaterial-uiemotion

Launching a modal using a method in Vue.js that includes constantly changing content

I am currently developing a feature in my VueJs component that involves opening a modal when a certain condition becomes true, and then retrieving data from a controller to display in the modal. After searching online, I have not been able to find clear i ...

javascriptvue.js

Do hooks get executed during every render phase?

Currently, I am utilizing the context API and hooks in my project. I have a total of 20 state variables, and every time one of them changes (resulting in setting states), the function is called again or re-renders. This has raised some concerns for me in t ...

javascriptreactjsreact-nativereact-hooks

Utilizing jQuery to perform a single request for an Ajax call

I have implemented a "popover" effect on my products using the code below. The popover content is fetched via Ajax and I am utilizing Twitter Bootstrap popovers. My issue is that the Ajax call is made every time I hover over a product. Is there a way to op ...

jqueryajaxtwitter-bootstrap

How can I delay the execution of "onAuthStateChanged" until "currentUser.updateProfile" has completed?

Currently facing an issue with registering users in my Vue app. When a user registers, I need to trigger the updateProfile function to add more user data. However, the problem arises when the onAuthStateChanged function in my main.js is executed before the ...

javascriptfirebasevue.jsfirebase-authentication

Having trouble with Node JS res.redirect() not functioning as desired?

I'm attempting to use res.redirect() to redirect to an external URL, but the host name isn't being replaced. For example: My current URL: https://example.com Desired redirect URL: When I use res.redirect("https://example-2.com/pqr?par=123 ...

javascriptnode.jsexpress

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

In Three.js, FBX bones exhibit smooth rotation, but GLTF bones display strange rotation behavior

Currently, I have successfully implemented a dynamic model that works with an FBX file using the Three.js FBXLoader. However, for convenience sake, I decided to switch to using a GLTF/GLB file as it contains textures within the same file. To achieve this, ...

javascriptnode.jsthree.jsgltffbx

javascript Problem with push() method

Currently, I am facing an issue with the push() method while trying to add cards to an array in a Deck object. This functionality was previously working fine for me, but recent modifications seem to have disrupted it. (The "testX" prints are included for d ...

javascriptarraysarray-push

Utilizing Snowpack to implement private class methods in JavaScript

In my front-end development, I utilize private JavaScript class methods and Snowpack for my workflow. Unfortunately, I've encountered an issue with Snowpack (as of v2.15.0-pre.5) not supporting private class methods. When trying to build using snowpa ...

javascriptrollupjssnowpackacorn

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

Can you explain the significance of the 'X-Bandwidth-Est 3' error message that states, "Refused to get unsafe header"?

I'm currently facing an issue with all the websites I am working on where I keep encountering the following error: Refused to get unsafe header "X-Bandwidth-Est 3" in base.js. This error seems to be related to a YouTube file named base.js, but after ...

javascriptangularjsyoutube

Error in NodeJS (EJS): Unable to locate stylesheet file

Having trouble adding a CSS file to my Node.js project with the EJS Template Engine. The file cannot be found when trying to access it. GET http://localhost/css/bulma.css net::ERR_ABORTED 404 (Not Found) Project folder structure ./index.js ./views ...

cssnode.jsexpressnginxejs

Set up a Bootstrap date picker to populate two input boxes with a start and end date. Additionally, disable the ability for the date value to change

In my project, I have implemented Bootstrap Datepicker to set two input boxes for selecting start and end dates. The rule is that the start date must be after today and the end date must be after the selected start date. To disable specific dates in the da ...

javascriptjqueryajaxtwitter-bootstrap-3

Explore bar with search button

I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...

javascriptjqueryhtmlsearch

Transfer the table from the end of the list to the beginning

I am attempting to rearrange the order of rows in a table by moving the last row to the first position. Specifically, I am working with an asp:Wizard control and trying to move the next navigation table row to the top. Below is the code I have written. Ca ...

jqueryasp.net

Choose individual characters one by one

I am having issues with selecting the day, month, and year separately to calculate the days until due. It seems like my substr function may not be working correctly. Can you help troubleshoot why this is happening? http://jsfiddle.net/infatti/XeqPT/15/ f ...

javascriptjquerymath

The customized sweet alert button is failing to trigger its designated function

I integrated vue-swal to show a pop-up dialog with customized functionality. However, I faced an issue while modifying the swal. In my modified version, there are 3 buttons each with specific actions that should be triggered upon clicking. But for some rea ...

javascriptvue.js

Adjusting ES2015 Map to accommodate the expected functionality

Exploring the capabilities of ES2015 Maps has been quite exciting, as I'm starting to see its potential. However, I've encountered a use case that has me stumped on whether Maps can handle it. Let's take a look at my class: class A { ...

javascripttypescriptecmascript-6

The autoIncrement feature is causing a syntax error at or near "SERIAL"

Encountering a build error : Unable to start server due to the following SequelizeDatabaseError: syntax error at or near "SERIAL" This issue arises only when using the autoIncrement=true parameter for the primary key. 'use strict'; export ...

javascriptangularjspostgresqlsequelize.js