jQuery click function only works on first element

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.

Answers:

Answer

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

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

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

Answer

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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.