Umgang mit Klickereignissen in jQuery (für Like und Unlike)

Question

Ich versuche, ein Like-Unlike-System mit AJAX und jQuery zu erstellen. Das "like" -Ereignis scheint richtig zu funktionieren, aber wenn ich "anders" möchte, reagiert das Ereignis nicht. Irgendwelche Vorschläge, um dieses Problem zu lösen, werden geschätzt.

$(document).ready(function() { 
    $(".like").click(function() { //this part is working 
     var item_id = $(this).attr("id"); 
     var dataString = 'item_id=' + item_id; 
     $('a#' + item_id).removeClass('like'); 
     $('a#' + item_id).html('<img src="images/loader.gif" class="loading" />'); 
     $.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: dataString, 
      cache: false, 
      success: function(data) { 
       if (data == 0) { 
        alert('you have liked this quote before'); 
       } else { 
        $('a#' + item_id).addClass('liked'); 
        $('a#' + item_id).html(data); 
       } 
      } 
     }); 

    }); 

    $(".liked").click(function() { //this part is not working 
     var item_id = $(this).attr("id"); 
     console.log(item_id); 
     var dataString = 'item_id=' + item_id; 
     $('a#' + item_id).removeClass('liked'); 

     $('a#' + item_id).html('<img src="images/loader.gif" class="loading" />'); 
     $.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: dataString, 
      cache: false, 
      success: function(data) { 
       if (data == 0) { 
        alert('you have liked this quote before'); 
       } else { 
        $('a#' + item_id).addClass('like'); 
        $('a#' + item_id).html(data); 
       } 
      } 
     }); 

    }); 
}); 

Answer 1

$(".like") und $(".liked") abgerufen werden, wenn das Dokument fertig ist, aber nicht aktualisiert, wenn Sie Klassen aus einem Elemente hinzufügen/entfernen.

Wenn Sie eine generische Klasse, um die Abstimmung Elemente wie ‚like-Toggle‘ zuweisen würden Sie in der Lage sein, Folgendes zu tun:

$(document).ready(function() { 
 
    $('.like-toggle').click(function(event) { 
 
    if ($(event.target).hasClass('like') { 
 
     // Call your unlike code, replace like with liked. 
 
    } else { 
 
     // Call your like code, replace liked with like. 
 
    } 
 
    }); 
 
});

Dies funktioniert, weil die like-toggle Klasse nie wird von den Elementen entfernt und somit werden die Elemente, die vorhanden sind, wenn das Dokument bereit ist, weiter funktionieren.