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

我有这个代码列表，我希望用户点击投票，并希望制作一个ajax帖子并获取JSON请求并在div slidera_num中显示。下面是ajax调用，它确实返回{"vote":3}。

function vote(idx) {

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

然而，每当我点击投票时，它会增加ajax调用，第三次点击，它会进行5次调用。我遇到的另一个问题是因为所有div都有类.slidera_num我不希望所有这些都更新相同的数字。

我该如何解决这个问题？

感谢。

Answer 1

您正在使用点击事件将点击事件绑定到按钮。

而是这样做：

function vote(idx) {

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

您不需要使用jquery来绑定click事件。

Answer 2

从您的HTML中删除onclick="vote(@item.Id);return false;"，然后在javascript代码中的某处调用vote()函数。

使用onclick html属性是老式的，不再正确（尽管工作）。

Answer 3

您有重复的ID #vote，但 ID应该是唯一的 ，同时也会移除onClick。

function vote(idx) {

        $('div.slidera_button a[name="vote"]').on('click',function (e) {
            e.preventDefault();
            var to = $(this);
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                to.parent().prev('.slidera_button').html(result);
            });
        });
    };

Answer 4

我看到其他答案都覆盖了副本。要仅更新特定结果，而不是使用* $（“。slidera_num”）。html（result）; *，请使用：

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

编辑 - 已更正。在$ .post内部，此不引用click元素，因此您必须事先保存对它的引用（ thisLink ）。从那里，遍历到父 li ，然后返回到目标“.slidera_num”。

Answer 5

在您的代码中，您在循环中将标记的ID指定为“投票”。因此来自该循环的所有元素将具有相同的ID。 ID应该是元素唯一。所以我会像这样重写你的代码

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

脚本是

$(function(){
  $("div.slidera_button a").click(function(e){
  var item=$(this);
  e.preventDefault();
  $.post('@Url.Action("Vote","Ajax")', { id :item.attr("id") } ,function(response){
     item.closest(".slidera_num").html(response);
  });
});

我使用HTML helper method来生成该操作方法的路径，而不是硬编码路径。所以我不需要担心我的网址中放了多少../。

简单的JQuery Ajax帖子

5 个答案: