jQuery click function only works on first element

Question

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

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 2

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 3

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 4

ID 必须是唯一的，而类名可以相同。

Answer 5

我尝试了您的链接，看起来所有警报都已连接并正常工作，只是没有按顺序排列（2 是 5 等）

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"));
        })
});

Answer 7

I have no idea what everyone else said, but I just changed an

<a id="anyidname".. 

from fancy box... to this script at the end of my html/php page... and the tag to

<a rel="anyclassname"..

<script type="text/javascript">
 $(document).ready(function(){
$('a[rel="anyclassname"]').fancybox({
    'width'         : '75%',
    'height'        : '75%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'          : 'iframe'
});
  });
</script>"

Answer 8

jquery class click function may work only on the first class element as

$('.class_name').click(function(){

but it should work for all class elements as

$(document).on('click', '.class_name', function(){