多個div綁定到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); 
})