时间戳

首页 > 解决方案 > 防止多次点击事件并更改目标值

javascript - 防止多次点击事件并更改目标值

问题描述

我的 UI 有一个表格中的用户列表。每个条目/用户有两个按钮。其中一个按钮是“检查”按钮。

<button type="submit" id="$id_from_db" class="bg-aqua btnCheckUser">Check</button>

当为特定用户单击检查按钮时，POST将向服务器发送请求。当请求正在加载时，所有按钮都应该被​​禁用，启动请求的按钮应该将它的类从bg-pupletobg-aqua 和它的文本从Checkto 改变Checking...。如果请求返回错误（由resultvalue指示1），则按钮应将其类从 更改bg-aqua为bg-danger。如果没有错误，该类应从bg-aquato更改bg-navy，文本从Checking...to更改User Okay。

我能够做到这一点，但它不仅会影响启动请求的按钮，还会影响所有按钮。

这是我的代码：

$(document).on("click", ".btnCheckUser", function() {
      var Item_Number = $(this).attr("Item_Number");
      /************************** MANIPULATE BUTTONS *******************************************************************************/
      $(this).removeClass('bg-purple').addClass('bg-aqua');
      $(this).html('Checking ...');
      $(this).attr("disabled", true);
      $('.btnViewUser').attr("disabled", true);
      /******************************* PROCESS AJAX **************************************************************************/
      var value = {
        Item_Number: Item_Number
      };
      $.ajax({
            url: "./plugins/serverside/CheckUserStatus",
            type: "POST",
            data: value,
            success: function(data, textStatus, jqXHR) {
                var data = jQuery.parseJSON(data);
                if (data.result == 1) {
                  $(this).removeClass('bg-aqua').addClass('bg-danger');
                  $("#CheckUser").html('Failed!');
                  $('.btnCheckUser').attr("disabled", false);
                  $('.btnViewUser').attr("disabled", false);
                  setTimeout(function() {
                    var table = $('#User_Table').DataTable();
                    table.ajax.reload(null, false);
                  }, 3500);
                } else if (data.result == 2) {
                  //------------------------ IF User Okay -------------------------------------------------------------------------------------------------------------------                 
                  $("#CheckUser").removeClass('bg-aqua').addClass('bg-navy');
                  $("#CheckUser").html('User Okay');
                  $('.btnCheckUser').attr("disabled", false);
                  $('.btnViewUser').attr("disabled", false);
                }

我该如何解决这个问题并且只影响启动请求的按钮，但在加载请求时仍然禁用所有按钮？

标签： javascriptjquery

解决方案

JSFiddle

我将代码剥离到对按钮逻辑很重要的部分。我正在使用一个虚拟 API，并且我随机生成结果值，因为我无法访问您正在使用的实际 API。

$(() => $('.btnCheckUser').on('click', ({ target }) => clickHandler(target)));

function clickHandler(button) {
  // Disable all buttons when one of them is clicked
  $('.btnCheckUser').prop('disabled', true);
  $('.btnViewUser').prop('disabled', true);

  // Remove all non standard classes, then add 'loading' class and text
  $(button).removeClass('bg-purple').removeClass('bg-navy').removeClass('bg-danger').addClass('bg-aqua');
  $(button).text('Loading...')

  $.ajax({
    url: 'https://reqres.in/api/users?delay=3',
    success: raw => {
      // Random result value
      const result = Math.random() > 0.5 ? 1 : 2;

      if (result === 1) {
        // Something went wrong, add 'danger' class and text
        $(button).addClass('bg-danger');
        $(button).text('Failed!')
      } else if (result === 2) {
        // Everything went fine, add 'success' class and text
        $(button).addClass('bg-navy');
        $(button).text('Success!');
      }
    },
    error: () => {
      // Add 'danger' class if something goes wrong
      $(button).addClass('btn-danger');
    },
    complete: () => {
      // Enable all buttons as we got a response
      $('.btnCheckUser').prop('disabled', false);
      $('.btnViewUser').prop('disabled', false);

      // Remove 'loading' class as we got a response
      $(button).removeClass('bg-aqua');
    }
  });
}

这应该会给你预期的行为。

推荐阅读