jQuery selector is only selecting the first link

Question

I've got a table like this:

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div id="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

And I'm using this jQuery to select the stop id that the user clicked.

$(function () {
    $("#stopId").live('click', function () {
    var stopId = $("#stopId").html()
        ...
        ...
    });
});

Yet my variable stopId always ends up being the first stopId in the table and not the one that was actually clicked. So where am I going wrong?

usually you're not allow to use same ID for more than one element, try using class — Teneff, Apr 05 '11 at 03:53
Good catch on using the id instead of class guys. I originally had it selecting the class, but changed it to id thinking I then needed to have ASP.NET MVC generate unique ids. — Gary the Llama, Apr 05 '11 at 04:04

score 3 · Accepted Answer · answered Apr 05 '11 at 03:56

3

You might want to change to

$(function () {
    $(".stopId").live('click', function () {
    var stopId = $(this);
        ...
        ...
    });
});

and the HTML becomes

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div **class**="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

answered Apr 05 '11 at 03:56

ysrb

6,693
2
29
30

"var stopId = $(this).html();" got me the value I wanted. Thanks for the help everyone. – Gary the Llama Apr 05 '11 at 04:05
I'd also suggest having a bit of a read up on the difference between class and id, as it's an important fundamental concept if you're doing anything with the DOM or css. – David Mason Apr 05 '11 at 04:12

score 2 · Answer 2 · answered Apr 05 '11 at 03:52

2

If that loop is generating a new TR with each iteration then you end up with more than one object with that same ID, which is invalid markup. An ID can only be used once in the document, hence jQuery only bothering to look for one. Once it finds the first one, it's done.

answered Apr 05 '11 at 03:52

DA.

39,848
49
150
213

It is generating a new TR with each iteration. What's the proper way of having it generate a new id in ASP.NET MVC and then selecting that unique id in jQuery? – Gary the Llama Apr 05 '11 at 03:56

score 1 · Answer 3 · answered Apr 05 '11 at 03:56

You can use $(this) to reference the selector. Also you should use class instead of ID if it shows up multiple times on the same page.

  $(function () {
        $("#stopId").live('click', function () {
        var stopId = $(this).html()
            ...
            ...
        });
    });

http://jsfiddle.net/Vrmhv/

score 1 · Answer 4 · edited May 23 '17 at 10:28

1

The key here is the difference between 'id' and 'class' attributes - a common source of confusion and something worth understanding.

In short, the 'id' attribute is a unique identifier for an element in the page, so there should only ever be one element on the page with each id. Internally, jQuery uses document.getElementById() to locate the element, which will only ever return a single element.

For non-unique (i.e. repeated) identifiers like your stopId, you should use the 'class' attribute. For your code, just change 'id=' to 'class=', and change "#stopId" to ".stopId". jQuery will use document.getElementsByClassName() which retrieves all elements that have a class="stopId" attribute. Note also that you can have multiple classes (e.g. class="stopId greenText")

See this question: div class vs id

edited May 23 '17 at 10:28

Community

1
1

answered Apr 05 '11 at 04:09

David Mason

2,917
4
30
45

I definitely understand the difference (but thanks for the refresher) but thought that I maybe needed to have my ASP.NET MVC generate different ids for each tr. Using a class ended up being easier. Thanks! – Gary the Llama Apr 05 '11 at 04:21
You would definitely need to have it generate unique ids for each one if using ids, since a html document with duplicate ids is not valid. In this case class definitely seems the way to go since you have 'this' to distinguish which was clicked. Try putting this into w3c's validator: ` Double Id

` – David Mason Apr 05 '11 at 04:55

jQuery selector is only selecting the first link

4 Answers4