6283
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.
<a href="http://specialorange.org/resume" rel="nofollow">Here</a> is the webpage.
Answer1: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.
Answer2: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>
Answer3: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>
Answer4: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>
