类不在DOM中更新，处理程序工作不正常

Question

所以，我不确定这是否是正确的方法，但我听说使用内联onclick处理程序而不是jQuery处理程序不是一个好主意。

我有一个用户的仪表板，用一个按钮来阻止/取消阻止用户。下面是我使用的阻止他们的办法：我有一个类似的功能

<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-lock，而不是fa-unlock-alt，它类似的行动，而是改为解开锁定。

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 

    } 

});