Javascript jQuery click函数只对第一个元素起作用

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

清单项目1


清单项目2

等

还有javascript

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

$（文档）.ready（函数（）{
$（'a#edit'）。单击（函数（）{
警报（$（this.parent（“li”）.attr（“id”））；
})
});

但只有第一个编辑链接起作用。其他人都被忽略了。 你可以看到这里的问题

---

提前感谢。

不能有两个ID相同的元素。这是无效的HTML。也许你想要一门课

尝试：

清单项目1


清单项目2

等

$（文档）.ready（函数（）{
$（'a.edit'）。单击（函数（）{
警报（$（this.parent（“li”）.attr（“id”））；
})
});

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

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

我想这是因为对每个元素使用相同的id。尝试改用类

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

---

在HTML中，

id

指的是一个唯一标识符。换句话说，让两个元素具有相同的

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>

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

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

$(document).ready(function() {
        $("li.sortable a:contains('edit')").click(function(){
                alert($(this).parent("li").attr("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>

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

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

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

---

如果您不想更改HTML（但您应该这样做），可以尝试以下方法：

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

---

我不知道其他人都说了些什么，但我只是换了个说法

<a id="anyidname".. 

---

啊，是的，很有效，谢谢。有趣的是，我没有想到你的其他方法。也许可以用它来代替。再次感谢。