Question

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.

Here is the webpage.

Answer 1

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

$('.btn').live('click',function(){...})

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