Menu
I'm fairly new to JQuery, was wondering about the .on() function. For example:
$('div').on('click', function() {$(this).toggleClass('show-description');});
the first bit of code is selecting all the 'div' elements within my HTML file and is listening for a click event. Then, it will toggle my 'show-description' class 'on' and 'off' for the last div I clicked on.
<div class="show-description"> ......</div>
What if I want to specify only a specific class I defined within a div tag to listen for my event?
I've tried:
$('div.about').on('click', function() {$(this).toggleClass('show-description');});
Where I have defined within HTML:
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id='about'> <span>About Me</span> </li>
......
</div>
</div>
Yet I don't get my 'show-description' declarations to activate . I've already tried reading up on the API .on() method, as well as going through Stack and can't seem to find anything to help with this. I'm not looking for direct answer just a nudge in the right direction.
Thanks.
239
asked Feb 28 '26 15:02
$('div.about') will select all div elements that has the about class. In your example - none of the div elements has that class.
The only about you have in your example is an id (which is not a class) and it's in the li element.
You might want this: $('li#about').on('click', ...
Check the following snippet:
$('div.about').on('click', function() {$(this).toggleClass('show-description');});
$('li#about').on('click', function() {$(this).toggleClass('show-description');});.show-description {
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix">
<div class="column">
<ul>
<li id='about'> <span>About Me</span> </li>
</ul>
</div>
<div class="about">This div has the "about" class</div>
</div>In the example above you can see that there are two elements you can click - the
li#aboutand thediv.about. Each click will toggle a red border to the element that was clicked.
As a side note (for the above example), we could do exactly the same with
$('div.about, li#about').on('click', ...
What if I want to specify only a specific class I defined within a div tag to listen for my event?
My example below doesn't use class and on function, though I believe you can get the idea. Assume you have below HTML code:
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
If you want to do something with every li within ul, then you use this:
$( "ul.topnav li" ).css( "border", "3px double red" );
Though, if you want to do something with every li within and direct child of ul, then you can do something like this:
$( "ul.topnav > li" ).css( "border", "3px double red" );
For your specific case you can do this:
$( "div #about" ).on( ... );
Hope it helps.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
