Jquery ergänzende Funktionen funktionieren nicht wie gewünscht

Question

Ich habe zwei sich ergänzende Funktionen, eine, die einen Beitrag veröffentlicht, und eine, die einen Beitrag entfernt, wenn der Benutzer auf die gleiche Schaltfläche klickt (die Schaltfläche fungiert als Umschalter). Wenn der Beitrag nicht veröffentlicht wird und der Benutzer ihn veröffentlicht, funktioniert alles so, wie es soll. Wenn der Benutzer sich entscheidet, die Veröffentlichung wieder zu veröffentlichen, wird die Veröffentlichungsfunktion irrtümlicherweise erneut aufgerufen. Ich verwende Klassenselektoren, um dies zu erreichen. Publish macht also seine Geschäfte und setzt die Klasse dann auf unpublished, so dass, wenn der Benutzer auf die Schaltfläche unpublish Ruft ruft (was nicht passiert).

Ich habe verifiziert, dass publish die Klasse nach dem Aufruf unpublish erhält, und umgekehrt, aber die komplementäre Funktion wird nie aufgerufen, obwohl ihre Klasse in den letzten Zeilen geändert wurde. Console.log zeigt, dass die Veröffentlichung immer aufgerufen wird.

Was mache ich falsch?

$('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(); 
    }); 

Wenn dies mit DOM oder etwas zu tun hat, wie kann ich es unterlaufen?

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>