javascript - jQuery click 函数仅适用于第一个元素

Question

我在使用 jQuery 时遇到了一些问题。

我正在制作一个简单的 CMS，在界面中我有一个页面列表，每个列表项中都有一个编辑链接。我让 jQuery 监听具有该编辑 ID 的点击。然后它将查看父 LI 以查看它具有什么 ID，以便用户可以将更改保存到数据库中正确的 pageId。

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

和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 在这里表现正确。

使用 class 而不是 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"));
        })
});