Question

我有一个叫做的课程：

<div class="upvote"></div>

我目前正在使用jquery尝试upvote东西并为消失动画。我不希望一个人能够在不刷新页面的情况下多次提升相同的内容。

如果我使用

$(".upvote").click(function(){ $(this).fadeOut(); $.ajax({...}); }

它改变了代码并改变了布局。所以我正在使用

$(".upvote").click(function(){ $(this).animate({opacity: "0.0"}); $.ajax({...}); }

这不会改变页面的布局;但是，它允许此人多次投票而无需刷新页面。我在试试

$(".upvote").click(function(){ $(this).animate({opacity: "0.0"}); $(this).removeClass("upvote"); $.ajax({...}); }

这样它就不会再触发JQuery了，但它不起作用。我该怎么办？

我通过其他一些Stack Overflow线程看起来很少，但似乎无法找到答案。

Answer 1

有很多方法可以做到这一点。

您可以使用事件委派并删除该类。

$(document.body).on('click', '.upvote', function () {
    $(this).animate({ opacicty: 0.0 }).removeClass('upvote');
});

您还可以使用one，一旦调用，它将自动删除处理程序。

$(".upvote").one('click', function() { ... });

然而，很难理解为什么一旦他们重新加载页面就应该允许他们再次投票？允许多次投票而没有刷新与刷新时没有什么区别。

Answer 2

我相信你正在寻找的是.one（）;

<强>。一（）

使用.one（）将确保您的事件每个元素每个事件只运行一次。

基本用法：

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

<强>。对（）

一般来说，您应该使用.on来使用jQuery附加事件处理程序。

$( "#foo" ).on( "click", function() {
  alert("clicked")
});

<强> .off（）

您可以使用.off（）删除之前使用.on（）附加的所有事件处理程序。

$( "#foo" ).off();

Answer 3

第一个也是最重要的是：

这只是代码的客户端，您试图阻止用户提交多个投票。请注意，因为任何人都可以使用浏览器中的开发人员工具一次又一次地发送ajax请求。

所以我宁愿在修复简单的UI问题之前阻止模型和幕后数据库结构的投票。

第二件事是：

如果您的页面在点击按钮后被刷新，我估计您需要更改＆＃34;键入＆＃34;您的按钮的属性来自＆＃34;提交＆＃34;到＆＃34;按钮＆＃34;。第一个和第二个代码应该可以得到你想要的结果。

请查看代码@plalx以获得更好的答案。

希望这有帮助！