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

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.

You have a lot of code in there, it's more than likely just some missing semi-colon or something else breaking all your JS. $('.btn').on('click', function () {}); should be working fine otherwise — Mark Pieszak - Trilon.io, Jul 31 '12 at 14:07
Thanks for the hint. My editor and JS Beautify and Lint couldn't find an issue, and I would assume if it was missing a semicolon; it would break it all, not just these select few. Any other suggestions? — chris Frisina, Jul 31 '12 at 14:25
Does @marcjae 's answer highlight the issue? I just dont know what 'bind the click event' means, and assume marcjae means that my generation line needs to be re-scoped outside of the (function TCC(){}), but am not sure — chris Frisina, Jul 31 '12 at 15:00
I believe it does. Since you are appending content to the DOM, after the click event handler has been been defined. So all you have to do, is add an deferred.done() after your each loops. Eg. $.each(cols, function(i) {...}).done(function(){ //Add click event handler now }) — marcjae, Jul 31 '12 at 15:27
There are two $.each functions, how would I either pull them out of the TCC() function or append .done() without having to duplicate the event handler code twice? I would prefer to make them act the same as the rest of the sections — chris Frisina, Aug 01 '12 at 04:55

Barlas Apaydin · Answer 1 · 2012-07-31T14:29:09.853

2

Try this; on() 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);
});

Here is jsFiddle.

edited Jul 31 '12 at 14:29

answered Jul 31 '12 at 14:07

Barlas Apaydin

7,233
11
55
86

1

For retrieving the `id` jQuery needlessly complicates things, just use `this.id;` – David Thomas Jul 31 '12 at 14:14

score 1 · Accepted Answer · answered Jul 31 '12 at 14:20

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.

answered Jul 31 '12 at 14:20

marcjae

1,372
8
8

`live` is deprecated - use `on` with a selector parameter like barlasapaydin shows – Adam Rackis Jul 31 '12 at 14:50
@marcjae What do you mean that I 'bind the click event' before the generation loop? – chris Frisina Jul 31 '12 at 15:21

score 0 · Answer 3 · answered Jul 31 '12 at 14:13

0

You can test the sample code on following link:

http://jsfiddle.net/shivkant/ueHNg/4/

answered Jul 31 '12 at 14:13

Shivkant

4,509
1
19
16

score 0 · Answer 4 · edited May 23 '17 at 10:24

0

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

What happened to console.log in IE8?

edited May 23 '17 at 10:24

Community

1
1

answered Jul 31 '12 at 14:46

Vanamali

291
1
6

click the right column subsections of 'Skills Table', not the left side – chris Frisina Jul 31 '12 at 14:57

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

4 Answers4

Linked