DOMでクラスが更新されておらず、ハンドラが正しく動作していない

Question

これは適切なアプローチであるかどうかは不明ですが、jqueryハンドラとは対照的にインラインonclickハンドラを使用することは良い考えではありません。

私はユーザのダッシュボードを持っており、ユーザをブロック/ブロック解除するボタンがあります。ここで私はそれらをブロックするために使用していたアプローチです：

<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> 

私は同様の機能を持っているが、それは代わりにfa-unlock-altの.fa-lockのために、それは同様の作用をするように見えますが、ロックの代わりにロックを解除します。

DOMがロードされると、初めてボタンをクリックしたときに正しく動作し、Ajax呼び出しが正常に行われ、データベースが更新され、クラスが想定通りに変更されますが、再度クリックしようとすると動作しません。

簡単なデバッグでは、ブラウザが色と形を表示していても、DOMは実際に要素のプロパティに登録された既定値を持っています。

私は取るべき別のアプローチがありますか？

ありがとうございます！

Answer 1

おそらく、親要素（delegate）にクリックハンドラを登録する必要があります。何かのように

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

    } 

});