Klasse wird nicht im DOM aktualisiert, Handler funktioniert nicht richtig

Question

So, ich bin mir nicht sicher, ob dies der richtige Ansatz ist, aber ich höre, dass die Verwendung der Inline-Handler onclick im Gegensatz zu JQuery-Handler keine gute Idee ist.

Ich habe ein Dashboard von Benutzern, mit einer Schaltfläche zum Blockieren/Entsperren der Benutzer. Hier ist der Ansatz, den ich ihnen bin mit blockieren:

<script> 
    $('.fa-unlock-alt').parent().on('click', function() { 
     var $button = $(this) 
     var id = $button.attr('id').slice(12); 
     console.log($(this)); 


     $.ajax({ 
      method: 'POST', 
      url: '/Websites/TimeTracking/Resources/PHP/Users/blockUser.php', 
      data: {idUser: id, status: 'Inactivo'}, 
      success: function (result) { 
       if (result == "Exito") { 
        alert("El acceso del usuario ha sido bloqueado!"); 
        $button.find('i').toggleClass('fa-unlock-alt fa-lock'); 
        $button.removeClass('btn-outline-success').addClass('btn-outline-danger'); 
       } 
       console.log(result); 
      }, 
      error: function (exception) { 
       alert("No se pudo bloquear el acceso!"); 
       console.log(exception); 
      } 
     }) 
    }) 
</script> 

ich eine ähnliche Funktion haben, aber es sieht für .fa-lock statt fa-unlock-alt, es ähnliche Aktionen der Fall ist, sondern zu entsperren statt sperren.

Sobald das DOM lädt, das erste Mal, wenn Sie auf die Schaltfläche klicken funktioniert es einwandfrei, Ajax-Aufruf wird erfolgreich durchgeführt, meine Datenbank wird entsprechend aktualisiert, und die Klassen werden wie angenommen geändert, aber jedes Mal, wenn ich versuche, es erneut zu klicken wird nicht funktionieren.

Ein schnelles Debugging zeigte mir, dass selbst wenn der Browser die gewünschten Farben und Formen anzeigt, der DOM tatsächlich den Standardwert hat, der auf den Eigenschaften des Elements registriert ist.

Gibt es einen anderen Ansatz, den ich nehmen sollte?

Danke!

Answer 1

Vielleicht sollten Sie den Click-Handler auf dem übergeordneten Element (delegate) registrieren. So etwas wie

$('.parent-element-selector-here').on('click', '.fa-unlock-alt, .fa-lock', function() { 

    var $button = $(this); 

    if ($button.hasClass('fa-unlock-alt')) { 

     // do this 

    } else { 

     // do that 

    } 

});