Javascript jquery toggel仅第一次激活和非激活工作

我希望表中有活动和非活动用户。我想为相同的方法发送一个ajax请求。首先，我想在同一个锚标记中切换active和inactive类。我先这么做

这是html

<tbody>
    <tr>
        <td>Dinuka Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="inactive">Activate</a></td>
    </tr>
    <tr>
        <td>Thilanga Perera</td>
        <td>User is inactive</td>
        <td><a href="javascript:void(0)" class="active">Dectivate</a></td>
    </tr>
    <tr>
        <td>Test Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="inactive">Activate</a></td>
    </tr>
</tbody>

---

我之前是使用

live（）

函数完成的。但现在jquery删除了活动函数。所以我在（）上使用了

。但这只是第一次起作用。问题是什么？

在动态更改元素类时，应该使用事件委派。试试这个：

$(document).on('click','.active', function () {
    $(this).html('Activate');
    $(this).removeClass('active');
    $(this).addClass('inactive');
});

$(document).on('click','.inactive', function () {
    $(this).html('Deactivate');
    $(this).removeClass('inactive');
    $(this).addClass('active');
});

注意：不要使用

文档

使用

表id/class

来提高性能

---

像这样的东西会有用的

添加“切换”类

<tbody>
    <tr>
        <td>Dinuka Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="toggle inactive">Activate</a></td>
    </tr>
    <tr>
        <td>Thilanga Perera</td>
        <td>User is inactive</td>
        <td><a href="javascript:void(0)" class="toggle active">Dectivate</a></td>
    </tr>
    <tr>
        <td>Test Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="toggle inactive">Activate</a></td>
    </tr>
</tbody>

<tbody>
    <tr>
        <td>Dinuka Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="toggle inactive">Activate</a></td>
    </tr>
    <tr>
        <td>Thilanga Perera</td>
        <td>User is inactive</td>
        <td><a href="javascript:void(0)" class="toggle active">Dectivate</a></td>
    </tr>
    <tr>
        <td>Test Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="toggle inactive">Activate</a></td>
    </tr>
</tbody>

$(".toggle").click(function () {
    if($(this).hasClass("inactive")){
        $(this).html('Deactivate');
        $(this).removeClass('inactive');
        $(this).addClass('active');
    }
    else {
        $(this).html('Activate');
        $(this).removeClass('active');
        $(this).addClass('inactive');
    }
});