Question

我希望表中有活跃和不活跃的用户。我想发送一个相同方法的ajax请求。首先，我想在相同的锚标签中设置活动和非活动类。我先这样做

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

js

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

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

我之前使用live()函数做了。但是现在jquery删除了live函数。所以我使用了on()。但它只是第一次工作。有什么问题？

Answer 1

当你动态地追逐元素类时，你应该使用事件委托。试试这个：

$(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');
});

注意：而不是document使用table id/class来提高效果。

<强> DEMO

Answer 2

这样的事情会起作用

添加＆＃39;切换＆＃39;班级

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

使用JavaScript

$(".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');
    }
});

Give it a go

jquery仅在第一次切换活动和非活动工作

2 个答案: