複数のdivのJQuery関数へのバインド - 複数回呼び出される関数

Question

divのリストがあります。これは1つのdiv構造体です：

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

divの各編集ボタンにアクションを添付します。 divのIDをdiv idで区切ります。これは、編集ボタンをクリックすると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); 
})