jQuery click function only works on first element.

Question

Hello, I am having some trouble with jQuery.

I am making a simple CMS and in the interface I have a list of pages, in each list item is an edit link. I made jQuery listen for clicks with that edit id. It will then look at the parent LI to see what id it has so the user can save the changes to the right pageId in the database.

My List

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

And the javascript

<script type="text/javascript">
$(document).ready(function() {
 $('a#edit').click(function(){
  alert($(this).parent("li").attr("id"));
 })
});

But only the first edit link works. All the others just get ignored. You can see the problem working here, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Thanks in advance.

Answer 1

You can't have two elements with the same ID. That's invalid HTML. Perhaps you want a class instead?

Try:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>


<script type="text/javascript">
$(document).ready(function() {
 $('a.edit').click(function(){
  alert($(this).parent("li").attr("id"));
 })
});
</script>

Answer 2

IDs must be unique, while class names can be the same.

Answer 3

I tried your link and it looks like all of the alerts are wired up and working properly, just not in sequential order (2 is 5, etc)

Answer 4

I think this is because use use the same id for each element. Try using a class instead.

<a href="#" class="edit">edit</a>

And then

$('a.edit').click(...)

Answer 5

In HTML, id refers to a unique identifier. In other words, it is against standards to have 2 elements with the same id. jQuery here behaves correctly.

Use a class instead of an id to identify your tags as such:

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $('a.edit').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

---

Alternatively, since the parent tag already seems to have a unique class, you could simply use it to target wanted tags. This would reduce what I call "class noise" (the defining of useless class to target element which could be targeted by their parent's unique attributes).

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $("li.sortable a:contains('edit')").click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Answer 6

If you don't want to change your HTML (but you should) you can try this:

$(document).ready(function() {
        $('a:contains("edit")').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});