Question

I have a list of div’s. This is one div structure:

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

I want to attach action for each edit button in div’s. I separate div’s by div id. This is JQuery function when I click on edit button:

$('#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); ">
        <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

IDs have to be unique. Replace id with class, and # with a dot.

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