ajax jquery和click事件

Question

我有幾個具有相同“取消關注”類的按鈕。
當用戶單擊按鈕之一時，它會觸發ajax請求並將類更改為“關注”，並向該類添加單擊偵聽器。
當用戶單擊“關注”按鈕時，它會觸發一個新的ajax請求並將類更改為“取消關注”。
現在的結果是，當用戶單擊“取消關注”鏈接時，一切順利，但是當用戶單擊“關注”按鈕時，它將觸發2個Ajax請求，其中1個“取消關注”和1個“關注”。

解決

新代碼：
承諾模擬ajax請求

$('.btn').click(function(event) {
  var $self = $(this);
  var screenName = $self.parent().prev().children().children('p').text().substring(1);

  if ($self.hasClass('unfollow')) {
    var unfollowReq = new Promise(function(resolve, reject) {
      $self.removeClass('unfollow').addClass('follow');
      $self.text('Follow');
      console.log('Unfollow');
      resolve();
    });
  } else if ($self.hasClass('follow')){
    var unfollowReq = new Promise(function(resolve, reject) {
      $self.removeClass('follow').addClass('unfollow');
      $self.text('Unfollow');
      console.log('Follow');
      resolve();
    });
  }
});

更新了JSFiddle

問候，
利亞德

Answer 1

跟隨單擊后，必須刪除跟隨事件偵聽器。

為此使用unbind（）。

https://api.jquery.com/unbind/

Answer 2

這是使用data-...切換它們的一種方法data-...

<button type="button" data-id="$id" data-action="follow" class="btn btn-primary btn-request">Follow</button>

$('.btn-request').click(function(e){
  var btn = $(this);
  var id = btn.data('id');
  var action = btn.data('action').toLowerCase();
  $(url, { id: id, action: (action == "follow" ? "unfollow" : "follow") }, funciton(result) {
      btn.data('action', (action == "follow" ? "Unfollow" : "Follow"));
      btn.html(btn.data('action'));
  });
});

或者您可以使用off()或unbind()函數

Answer 3

對於這樣的事情，事件委托是您最好的朋友。

您可以將兩個行為（遵循和取消遵循）永久委派給包含元素。 因此，按鈕的行為，就像它們的外觀一樣，可以僅由className的存在/不存在來確定-在這種情況下為“ follow”或“ unfollow”。 無需附加/分離事件處理程序。

jQuery的.on()提供了所有必要的功能。

$(document).on('click', '.unfollow', function(event) {
    $self = $(this).removeClass('unfollow');
    // At this point, with neither class, 'follow' nor 'unfollow', the button is effectively disabled.
    $ajax(...).then(function() {
        // With assurance that the server-side state is at "unfollow", give the button "follow" appearance and behaviour.
        $self.addClass('follow').text('Follow');
    }, function(err) {
        // Hmm state is indeterminate.
        // Probably safer to assume that the ajax failed completely, therefore revert to "unfollow".
        $self.addClass('unfollow').text('Unfollow');
    });
}).on('click', '.follow', function() {
    $self = $(this).removeClass('follow');
    // At this point, with neither class, 'follow' nor 'unfollow', the button is effectively disabled.
    $ajax(...).then(function() {
        // With assurance that the server-side state is at "follow", give the button "unfollow" appearance and behaviour.
        $self.addClass('unfollow').text('Unfollow');
    }, function(err) {
        // Hmm state is indeterminate.
        // Probably safer to assume that the ajax failed completely, therefore revert to "follow".
        $self.addClass('follow').text('Follow');
    });
});

實際上，您可能會委托給document以外的其他東西。

承諾似乎完全無關緊要，因此被省略。