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

    }

});