解决

Question

我有几个具有相同类别的按钮＆＃39;取消关注＆＃39; 当用户点击其中一个按钮时，它会触发ajax请求并将课程更改为“关注”，并在课程中添加点击监听器。
当用户点击＆＃39;关注＆＃39;按钮它会触发新的ajax请求，并将课程更改为“取消关注”＆＃39;。
现在结果是当用户点击“取消关注”时链接一切顺利，但当用户点击＆＃39;关注＆＃39;按钮它触发2个ajax请求，其中1个是“取消关注”＆＃39; ＆＃39;跟随＆＃39;中的一个。<

解决

新代码：
承诺模拟了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

问候，
LIAD。

Answer 1

您必须在跟随点击后删除跟随事件监听器。

使用unbind（）。

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

Answer 2

这是一种使用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

对于这样的事情，事件授权是你最好的朋友。

您可以将两个行为（跟随和取消关注）永久委托给包含元素。因此，按钮＆＃39;行为，就像他们的外表一样，只能通过classNames的存在/不存在来确定 - ＆＃34;关注＆＃34;或者＆＃34;取消关注＆＃34;在这种情况下。没有必要附加/分离事件处理程序。

jQuery＆＃39; s .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以外的其他人。

承诺似乎完全不相关，并且被省略。

ajax jquery和click事件

解决

3 个答案: