Jquery class is not responding to .click() despite being listed within selectors


I have some several labels on a webpage, that can be clicked, and all share the class 'btn'. In the console, if I use the selector $('.btn'); among others the following elements DO appear:

<label id=​"skillstable_Certification" class=​"row btn">​Certification​</label>​, <label id=​"skillstable_Compliance" class=​"row btn">​Compliance​</label>​, <label id=​"skillstable_Technology" class=​"row btn">​Technology​</label>​, <label id=​"skillstable_version(s)​" class=​"column btn">​Version(s)​</label>,​ <label id=​"skillstable_startdate" class=​"column btn">​StartDate​</label>​, <label id=​"skillstable_enddate" class=​"column btn">​EndDate​</label>​, <label id=​"skillstable_elapsedtime" class=​"column btn">​ElapsedTime​</label>,​ <label id=​"skillstable_expertiserating" class=​"column btn">​ExpertiseRating​</label>,​

which matches the HTML:

</fieldset> <label id="fs_skillstable_heading" class="fs btn heading skillstable">Skills Table</label><br class=""> <label id="skillstable_Certification" class="row btn">Certification</label> <label id="skillstable_Compliance" class="row btn">Compliance</label> <label id="skillstable_Technology" class="row btn">Technology</label><br class=""> <label id="skillstable_version(s)" class="column btn">Version(s)</label><br class=""> <label id="skillstable_startdate" class="column btn">StartDate</label><br class=""> <label id="skillstable_enddate" class="column btn">EndDate</label><br class=""> <label id="skillstable_elapsedtime" class="column btn">ElapsedTime</label><br class=""> <label id="skillstable_expertiserating" class="column btn">ExpertiseRating</label><br class=""> </fieldset>

however, these elements only are not registering with the $('.btn').on('click', function() {...}) function, which has a console.log() section to show that it has been clicked. They all have the .btn class, so I am totally lost here. I am trying to make an array to use for persistence, and made a quick variable with .push() to show all the elements I have clicked on so i can use that string to make a persistent URL, but noticed that these sections only are not registering.

The generation for the elements are scoped within a self calling function (function TCC() {...})();, so I tried pulling them out of that function and calling them individually, but that did not work either. I also switched the functions from .click() to .on('click', function(){}) to no avail.

<a href="http://specialorange.org/resume" rel="nofollow">Here</a> is the webpage.


The issue occurs because you bind the click event, before the "column button generator" loop. Easiest fix would be to use a "live" event


Or alternatively, create a callback for the loop and bind the click event then.


Try this; <a href="http://api.jquery.com/on/" rel="nofollow">on()</a> usage :

Edit: @David Thomas mentioned this.id; will be better than $(this).attr('id'); :

$(document).on('click','.btn',function() { var whichPart = this.id; console.log(whichPart); });

<a href="http://jsfiddle.net/ueHNg/8/" rel="nofollow">Here is jsFiddle.</a>


You can test the sample code on following link:

<a href="http://jsfiddle.net/shivkant/ueHNg/4/" rel="nofollow">http://jsfiddle.net/shivkant/ueHNg/4/</a>


your page works in chrome for me, i clicked on Expertise/skills/tools etc in the left section and it shows the links i clicked in the orange section on the right if that is what you wanted.

It works in IE if console/developer tools is opened already, it might be because you used console.log statements in your code

Refer to this

<a href="https://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8" rel="nofollow">What happened to console.log in IE8?</a>


  • Unable to get dirtyPropertyNames properties values for association fields in grails
  • Very Basic JS Coding, and SoundManager2 or not?
  • How do I recusively unzip nested ZIP files?
  • Polygon infowindows in Gmaps4Rails
  • Request map direct me to Login page in Grails
  • Parse an XML fragment stored in a string into nodes in XSLT with SAXON for Java
  • How can I organize this data into the objects I want with LINQ?
  • What is wrong with this emulation of CMPXCHG16B instruction?
  • Devise: undefined method `user_signed_in?' for ApplicationController:Class
  • Zend Framework 2, Module Redirect
  • Why does PHP appear to evaluate this condition incorrectly?
  • Edit assembly language code in Visual Studio while stepping through each statement
  • Find tangent points on a curve from a user-given point outside the curve
  • Contact form problem - I do receive messages, but no contents (blank page)
  • Avoid Inheriting Super Class Tests in ScalaTest
  • Replace and retrieve placeholder value
  • Scala using regex with or syntax in match case statement
  • Create a link to a web page that runs a Javascript function on the page
  • Google Places API - Find a company's CID and LRD
  • Hide HTML elements without javascript, only CSS
  • How to have background script and something similar to a default popup?
  • Regex thinks I'm nesting, but I'm not
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • jquery mobile loadPage not working
  • Delete MySQLi record without showing the id in the URL
  • Unanticipated behavior
  • Data Validation Drop Down Box Arrow Disappearing
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How do you join a server to an Active Directory (domain)?
  • Trying to get generic when generic is not available
  • JaxB to read class hierarchy
  • Django query for large number of relationships
  • Binding checkboxes to object values in AngularJs
  • To Get the radio button value in ruby on rails
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?