0

I'm trying to use jquery to add a .click() function to several dynamically generated spans using their class. What I'm trying is essentially:

$(".spanClass").click(function () {});

I have also tried:

$(".spanClass").on("click", function () {});

Now, this all works, to an extent. My issue is that the .click() only gets assigned to the first span with this class. Every other span with this class does absolutely nothing when I click it. Obviously, I need every span with the class to have the .click().

It may be important to note that my spans are contained inside cells of a table. Each span is in a different cell, and there is only one cell per table row that contains a span.

Any help is greatly appreciated.

JSFiddle of what I'm working with. JSFiddle link

Edit note: Originally this question involved using an ID instead of a class. People noted I should use class instead, and should edit the question if that didn't work.

Edit 2: Added info about tables.

Final edit: Best solution chosen. If you come across this issue, best answer is functioning. My issue was a scripting issue inside my .on("click") function itself.

user3712957
  • 25
  • 6
  • 1
    IDs should be unique on each page – John Conde Jun 05 '14 at 21:04
  • Fair enough, but even doing it with a class, it still has the same behavior. – user3712957 Jun 05 '14 at 21:22
  • You should probably edit the question/title to avoid getting downvoted into oblivion. If you want to hit every span with a certain class, $('.classname').click... should work. – djbhindi Jun 05 '14 at 21:32
  • The code you are providing is correct. There must be some other problem, maybe a not valid HTML structure or a problem when dynamically generating the spans. – Teetrinker Jun 05 '14 at 21:57

1 Answers1

3

You need to use a class instead of an id.

The id should be unique in the entire page:

The ID must be unique in a document, and is often used to retrieve the element using getElementById.

Because of this, trying to assign the click event to it will fire only on the first occurence of the span with id = spanId

See example below, and use .on("click", function()) instead of .click()

$(".yourspanclass").on("click", function(){
    // do what you need on click 
});

see a working example HERE

BeNdErR
  • 17,471
  • 21
  • 72
  • 103
  • Using this exact syntax, the click method still only fires on the first span with the class. $(".mySpanClass") successfully returns all spans I need the click to work on, but the only one that does anything when clicked is the first. – user3712957 Jun 05 '14 at 21:43
  • did you have a look at my fiddle? each span fires an alert with its own content.. if this code is not working for you, then I think you have something wrong in your HTML. Please create a fiddle with your actual code and post the link – BeNdErR Jun 05 '14 at 21:45
  • I've updated my original question with a bit more detail. Aside from being in a couple of extra Divs, this is essentially how my page layout looks. It's very simple. I thought including it being in a table might be causing some sort of issue, but with the JSFiddle, everything still works. JSFiddle: http://jsfiddle.net/4eLpK/ – user3712957 Jun 05 '14 at 21:57
  • double check your HTML :) ps: post your fiddle link in the original question, it will help more there than here – BeNdErR Jun 05 '14 at 22:03
  • It doesn't seem to be an HTML issue. The issue is with something in my script. When I remove everything out of the script and just have an alert, it functions on all spans. It's strange, I verified my script with JSHint and everything. It's more strange that the first one functioned, but the rest didn't. Overall, this question is answered though. You've been a great help. Selecting best answer. I don't think I can close. – user3712957 Jun 05 '14 at 22:08