Jqueryの補完機能が必要に応じて動作しない

Question

私は2つの補完的な機能を持っています.1つは投稿を公開し、もう1つはユーザーが同じボタンをクリックすると投稿を非公開にします（ボタンはトグルとして機能します）。投稿が公開されておらず、ユーザーが公開しようとするとすべてが正常に動作しますが、ユーザーが再度公開を解除すると、公開する関数が誤って再度呼び出されます。私はこれを達成するためにクラスセレクタを使用しています。したがって、ビジネスを公開してクラスを非公開に設定すると、ユーザーがボタンをクリックしたときに未発行が呼び出されます（これは発生しません）。

私はpublishが呼び出された後にクラスを非公開にすることを確認しましたが、逆の場合でも補完的な関数は最終行でクラスが変更されても呼び出されません。 Console.logは、パブリッシュが呼び出され続けることを示します。

私は間違っていますか？

$('a.publish').on('click', function(e) { 
     console.log('publish item'); 
     var id = $(this).attr('data-id'); 
     var table = $(this).attr('rel'); 
     var parent = $(this).closest('.btn-group'); 
     var current = $(this).closest('a'); 
     $.ajax({ 
      type: 'POST', 
      url: '', 
      data: 'publish=' + id + '&table=' + table, 
      success: function(data) { 
       $('#published_' + id).hide().html(data).fadeIn(); 
       count(table); 
       var buttons = parent.find(".btn-danger"); 
       buttons.each(function() { 
        $(this).removeClass("btn-danger").addClass("btn-primary"); 
       }); 
       current.find('span').text('Unpublish'); 
       current.removeClass("publish").addClass("unpublish"); 
      } 
     }); 
     e.preventDefault(); 
    }); 
    $('a.unpublish').on('click', function(e) { 
     console.log('unpublish item'); 
     var id = $(this).attr('data-id'); 
     var table = $(this).attr('rel'); 
     var parent = $(this).closest('.btn-group'); 
     var current = $(this).closest('a'); 
     $.ajax({ 
      type: 'POST', 
      url: '', 
      data: 'unpublish=' + id + '&table=' + table, 
      success: function(data) { 
       $('#published_' + id).hide().html(data).fadeIn(); 
       count(table); 
       var buttons = parent.find(".btn-primary"); 
       buttons.each(function() { 
        $(this).removeClass("btn-primary").addClass("btn-danger"); 
       }); 
       current.find('span').text('Publish'); 
       current.removeClass("unpublish").addClass("publish"); 
      } 
     }); 
     e.preventDefault(); 
    }); 

これはDOMや何かと関係がありますが、どうすれば元に戻すことができますか？

HTML：

<a class="btn btn-sm btn-primary unpublish" href="javascript:void(0);" data-id="213114246" rel="projects"> 
    <i class="glyphicon glyphicon-plus"></i> 
    <span class="actions">Unpublish</span> 
</a> 

Answer 1

$('.btn-container').on('click', '.btn', function(e) { 
 
    if ($(this).hasClass('publish')) { 
 
     console.log('publish item'); 
 
     $(this).removeClass("publish").addClass("unpublish").text('unpublish'); 
 
    } else { 
 
     console.log('unpublish item'); 
 
     $(this).removeClass("unpublish").addClass("publish").text('publish'); 
 
    } 
 
    e.preventDefault(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-container"> 
 
    <a class="btn btn-sm btn-primary unpublish">unpublish</a> 
 
</div>