Question

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="vote" name="vote" onclick="vote(@item.Id);return false;">vote</a> </div>
    </li>
 }

I have this code that makes a list of images, and i want the user to click on Vote and want to make an ajax post and get JSON request and dispay in div slidera_num. Below is ajax call and it does return {"vote":3} .

function vote(idx) {

        $("#vote").click(function () {
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                $(".slidera_num").html(result);
            });
        });
    };

However, everytime I click on vote, it increments the ajax calls, third time i click, it makes 5 calls or so. Another problem I have is since all the div will have class .slidera_num I dont want all of them to be updated same number.

how can i fix this?

thanks.

Answer 1

I see the other answers have the duplicate covered. To update the specific result only, instead of using *$(“.slidera_num”).html(result);*, use this:

$("#vote").click(function () {
    var thisLink = $(this);
    $.post("/Home/VoteAjax/", { id: idx}, function (result) {
        $(thisLink).closest("li").find(".slidera_num").html(result);
    });
});

Edit — corrected. Inside $.post, this does not refer to the click element, so you have to save a reference to it beforehand (thisLink). From there, traverse to the parent li, then back down to the target “.slidera_num”.