jQuery Dynamic .click Question

[blakemoso]

I'm a bit new to this stuff, and I'm trying to set up something along the lines of this:

$(document.getElementById(i)).click(function () { alert(i); });

Where 'i' is a number generated by a for loop.
Basically, I have a dynamic amount of things that I want to be able to click on... Once I click on it I want it to tell me which one I clicked on.

What I have right now lets me click on all of the things, but it always shows the highest number that 'i' can be.

How can I get it so that it keeps track of which number belongs to which thing?

Sorry if I'm not very clear, I can try to elaborate on things if need be, and thanks in advance for any help anyone can offer!

[Diki]

For starters there's two things wrong with that code snippet that you posted:
- You're unnecessarily using the getElementById function
- You're using the deprecated click function

In jQuery the convention is to pass a string to $() instead of a DOM object; the string just needs to be formatted like the identifiers in CSS, so that access your element "i" you just need to do this:

$("#" + i)

And when you are adding event listeners to objects you should always use the on() function like this:

$("#" + i).on("click", function() {
    alert(i);
});

Now as for why you are only ever getting the maximum value of i in your alert: it is because of how data in JavaScript works. Your i variable is just a reference to a number, and when you increment that number in your for loop you're just incrementing the value that i references, so each of those event listeners you create for the "click" event will be referencing the newly incremented value.
To get around this you need to put the value of i into its own namespace:

for (var i = 0; i < 4; i++) {
    (function(i_copy) {
        $("#"+i).on("click", function() {
            alert(i_copy);
        });
    }(i));
}

(example of this working on jsFiddle)

That anonymous function that i is being passed to creates a new namespace, so i_copy isn't referencing the same data.
However that isn't the best approach to this. If all you want is to make a group of objects listen for the "click" event and then report their index position then you can just use pure built-in jQuery functions:

$(".clickable").on("click", function() {
    alert($(this).index());
});

(example of this working on jsFiddle)

Passing ".clickable" to the $() function will return all DOM objects with a class of "clickable".
The $(this) call will return the jQuery object being used in the current context (in this example it will be whichever object you click).
And the index() function simply returns the index position of the $(this) jQuery object in the array of objects found by the passed ".clickable" identifier.

[blakemoso]

Thanks, that actually helps a lot! Seems to work a lot better.

[Diki]

At 3/25/13 11:59 AM, blakemoso wrote: Thanks, that actually helps a lot! Seems to work a lot better.

Good to hear it worked out for you.

And just for the sake of clarity it turns out I'm an idiot and used the wrong URL for my second link to jsFiddle. The second link to the "working jsFiddle" was supposed to go here.