javascript - 多个 div 绑定(bind)到 JQuery 函数 - 函数被多次调用

Question

我有一个 div 列表。这是一个 div 结构:

<div class="commentWrap" id="@Model.CommentId">
        <p id="commentTextValue">@Model.CommentText</p>
        <a id="editButton" href="#">Edit</a>
</div>

我想为 div 中的每个编辑按钮附加操作。我通过 div id 分隔 div。这是当我点击编辑按钮时的 JQuery 函数:

$('#editButton').live('click', function (e) {
    e.preventDefault();

    var container = $(this).closest('div');
    var itemId = container.attr('id');
    alert(itemId);
})

而且它有效。它显示正确的元素 ID。
问题是当我有多个 div 时。例如，当我有 5 个 div 并单击某个编辑按钮时，警报消息会显示 5 次???
我在这里做错了什么？

<div id="messages">


    <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); ">
        <a href="/Comment/SomeAction">Vlada Vucetic</a> 467327
        <div class="commentWrap" id="467327">
            <p class="commentTextValue">test 4</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>


    <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); ">
        <a href="/Comment/SomeAction">Vlada Vucetic</a> 980339
        <div class="commentWrap" id="980339">
            <p class="commentTextValue">test 3</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>


    <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); ">
        <a href="/Comment/SomeAction">Vlada Vucetic</a> 166111
        <div class="commentWrap" id="166111">
            <p class="commentTextValue">test 2</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>


    <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); ">
        <a href="/Comment/SomeAction">Vlada Vucetic</a> 769630
        <div class="commentWrap" id="769630">
            <p class="commentTextValue">test 1</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>

</div>

Answer 1

ID 必须是唯一的。将 id 替换为 class，将 # 替换为点。

<div class="commentWrap" id="@Model.CommentId">
        <p class="commentTextValue">@Model.CommentText</p>
        <a class="editButton" href="#">Edit</a>
</div>

$('.editButton').live('click', function (e) {
    e.preventDefault();

    var container = $(this).closest('div');
    var itemId = container.attr('id');
    alert(itemId);
})