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

私はdivのリストを持っています。これは1つのdiv構造です:

<div class="commentWrap" id="@Model.CommentId">
        
@Model.CommentText

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

And it works. It display correct ID of element.
Problem is when I have more than one div. For example when I have 5 div's and click on some edit button alert message is displayed 5 times???
What I did wrong here?

<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); ">
        Vlada Vucetic 467327
        <div class="commentWrap" id="467327">
            
test 4

Edit </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); "> Vlada Vucetic 980339 <div class="commentWrap" id="980339">
test 3

Edit </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); "> Vlada Vucetic 166111 <div class="commentWrap" id="166111">
test 2

Edit </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); "> Vlada Vucetic 769630 <div class="commentWrap" id="769630">
test 1

Edit </div> </div> </div>
0
あなたのアンカーはすべて、同じid editButton ですか?もしそうなら、私は全く驚いていません。
追加された 著者 Ilia G,

1 答え

IDは一意でなければなりません。 class には id を、ドットでを置き換えてください。

<div class="commentWrap" id="@Model.CommentId">
        
@Model.CommentText

Edit </div> $('.editButton').live('click', function (e) { e.preventDefault(); var container = $(this).closest('div'); var itemId = container.attr('id'); alert(itemId); })
2
追加された
私はこれをしましたが、動作しません:(もし私がID 45678でそれらの5つから1つの項目をクリックすると、私に警告が表示されます '45678' 5回。
追加された 著者 1110,
彼らはすべて異なっている。私は質問にhtmlを追加しました。
追加された 著者 1110,
はい、これは動作します。しかし、それは私の問題の原因ではありません。今私は最後に知りません。私は別の質問をする必要があります。ありがとう
追加された 著者 1110,
各IDが一度だけ使用されていることを確認しましたか?はいの場合は、生成されたHTMLコードを表示します
追加された 著者 Rob W,
私はコードを正常にテストしました。 このフィドル編集リンクのいずれかをクリックしてください>
追加された 著者 Rob W,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript