如何防止在jQuery中连续点击按钮?

时间:2017-01-02 07:55:43

标签: javascript jquery html ajax

您好我在用户点击按钮时尝试使用AJAX调用重置div内容。但是如果用户连续点击则会发生错误。我想阻止用户在启动时禁用点击或停止动画。

我尝试停止jQuery的功能,但我无法解决问题。

我正在使用此代码

df = df.sort_values(['Symbol','Date']).reset_index(drop=True)
df['Return'] = df.groupby('Symbol')['Close'].pct_change()
print (df)
          Date Symbol   Close    Return
0   12/27/2016   AMZN  771.40       NaN
1   12/28/2016   AMZN  772.13  0.000946
2   12/29/2016   AMZN  765.15 -0.009040
3   12/30/2016   AMZN  749.87 -0.019970
4   12/27/2016  GOOGL  805.80       NaN
5   12/28/2016  GOOGL  804.57 -0.001526
6   12/29/2016  GOOGL  802.88 -0.002101
7   12/30/2016  GOOGL  792.45 -0.012991
8   12/27/2016   NFLX  128.35       NaN
9   12/28/2016   NFLX  125.89 -0.019166
10  12/29/2016   NFLX  125.33 -0.004448
11  12/30/2016   NFLX  123.80 -0.012208

3 个答案:

答案 0 :(得分:1)

您可以在用户单击按钮后禁用,并在动画或某些内容完成后启用,例如AJAX调用。



$(function () {
  $("#frm").submit(function () {
    $(this).find("input").prop("disabled", true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm">
  <p>You can click me only once!</p>
  <input type="submit" value="Send" />
</form>
&#13;
&#13;
&#13;

您必须使用上述代码,但由于代码段是沙盒,另一种选择是:

&#13;
&#13;
$(function () {
  $("#frm input").click(function () {
    $this = $(this);
    $this.prop("disabled", true);
    setTimeout(function () {
      $this.prop("disabled", false);
    }, 3000);
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm">
  <p>You can click me only once! Gets enabled after request is fulfilled (dummy 3 seconds).</p>
  <input type="submit" value="Send" />
</form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

每当执行click或doubleClick函数调用时。

在这些函数的第一行写  $('button').attr(“disabled”, true);

答案 2 :(得分:0)

您可以访问按钮的HTML属性 - “已禁用”,并将其设置为false,并在单击该按钮时将其设置为true。

$(function () {
    $('.reset').prop('disabled', false);

    $(".reset").click(function (e) {
        $(this).prop('disabled', true);
        //...your code
    });
}

此外,请检查您是否可以使用它的ID选择按钮。在此处按类名选择按钮控件似乎不正确,因为多个控件可能使用相同的类。