jQuery单击功能仅适用于第一个元素

Question

我在使用jQuery时遇到了一些麻烦.

我正在创建一个简单的CMS,在界面中我有一个页面列表,每个列表项都是一个编辑链接.我让jQuery用该编辑ID监听点击.然后,它将查看父LI以查看它具有的id,以便用户可以将更改保存到数据库中的右侧pageId.

我的列表

<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>

和javascript

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

但只有第一个编辑链接有效.所有其他人都被忽略了.您可以在此处查看问题,http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

提前致谢.

Answer 1

在HTML中,id指的是唯一标识符.换句话说,具有相同的2个元素是违反标准的id.这里的jQuery行为正确.

使用a class而不是a id标识您的标记:

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

或者,由于父标记似乎已经具有唯一的类,因此您可以简单地使用它来定位所需的标记.这将减少我所谓的"类噪声"(将无用类定义为可以由其父级的唯一属性作为目标的目标元素).

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

我认为这是因为use 对每个元素使用相同的id.尝试使用类来代替.

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

然后

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