1 
@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，所以我不希望它们都更新相同的数字。

我怎样才能解决这个问题？

谢谢。

4

5 回答 5

2

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

而是这样做：

function vote(idx) {

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

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

于 2012-05-06T04:27:21.597 回答
2

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

使用 onclick html 属性是老派的，不再正确（尽管有效）。

于 2012-05-06T04:27:39.613 回答
2

您有重复的 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);
            });
        });
    };
于 2012-05-06T04:27:57.060 回答
2

我看到其他答案包含重复项。要仅更新特定结果，而不是使用 *$(".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 中，this不引用 click 元素，因此您必须事先保存对它的引用（thisLink）。从那里，遍历父li，然后返回到目标“.slidera_num”。

于 2012-05-06T04:28:56.837 回答
2

在您的代码中，您将 a 标签的 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来生成该操作方法的路径。所以我不需要担心在我的 URL 中有多少 ../ 。

于 2012-05-06T04:31:06.400 回答