ajax jqueryとclickイベント

Question

私は同じクラス 'unfollow'を持ついくつかのボタンがあります。
ユーザーがボタンの1つをクリックすると、ajaxリクエストがトリガーされ、クラスが「フォロー」に変更され、クリックリスナーがクラスに追加されます。
ユーザーが 'follow'ボタンをクリックすると、新しいajaxリクエストがトリガーされ、クラスを 'unfollow'に変更します。
ユーザーは 'unfollow'リンクをクリックするとすべてうまくいくが、 'follow'ボタンをクリックすると、2つのajaxリクエスト、 'unfollow'の1つ、 'follow' 。

は

を解決し、新しいコード：
約束はアヤックスが

$('.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

を使用することができますを使用してそれらを切り替えるための方法である、イベントの代表団はあなたの親友です。

followとunfollowの2つの動作を要素を含むものに永続的に委譲することができます。したがって、ボタンの動作は、外観のように、classNamesの有無によってのみ判断できます。この場合、「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以外に委任します。

約束は完全に無関係であると思われ、省略されています。