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

多个div绑定到JQuery函数 - 多次调用函数

1 个答案: