jquery toggel只有第一次激活和非激活工作

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刪除直播功能。所以我用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

像這樣的工作

添加使用 '切換' 類

<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