更改类时更改href函数jquery

Question

I have a href link which will connect or disconnect a user.
When the user is connected the link must disconnect him when it is clicked, in another hand, it must connect the user if the user is not connected yet.
Everything goes fine with me but when I disconnect a user I cannot connect him until I refresh the page. I have this javascript code :

$(document).ready(function() {
    $('a.disconect').click(function(e) {
        e.preventDefault();
        $(this).css('background', 'url(images/connect.png) no-repeat');
        $(this).removeClass('disconect');
        $(this).addClass('connect');
        //: url(images/rep_usr.png) no-repeat;
        var parent = $(this).parent().parent();
        $.ajax({
            type: 'get'
            , url: 'Save.php?id=enable'
            , data: 'username=' + $(this).attr('id').replace('record-', '')
            , beforeSend: function(data) {
                //alert(data);
            }
            , success: function(data) {
                //alert(data);
            }
        });
    });
});   


$(document).ready(function() {
    $('a.connect').click(function(e) {
        e.preventDefault();

        $(this).css('background', 'url(images/disconnect.png) no-repeat');
        $(this).removeClass('connect');
        $(this).addClass('disconect');
        //: url(images/rep_usr.png) no-repeat;
        var parent = $(this).parent().parent();
        $.ajax({
            type: 'get'
            , url: 'Save.php?id=disable'
            , data: 'username=' + $(this).attr('id').replace('record-', '')
            , beforeSend: function(data) { //alert(data);
                //alert(data);
            }
            , success: function(data) {
                //alert(data);
            }
        });
    });
});

I want to call another function every time it is clicked.

Answer 1

You are trying to dynamically change the class, which then does not map to the events that fire on those classes. First, you should be using

$(document).on('click', 'a.disconect', function(){

instead of

$('a.disconect').click(function(e) {

as this will dynamically map the events to any new classes that are added to the DOM. https://learn.jquery.com/events/event-delegation/

But a better solution is to create two buttons and .hide() or .show() whichever one you want to be active. Then you don't have to go through the unnecessary adding-and-removing of classes and background images.

Answer 2

Hello If i understand your problem clearly, then you can use hasClass() function to find the current class then change that i added a similar code below hope you will find something helpful through it

 $("a").click(function(){ if($(this).hasClass("current")||$(this).hasClass("disconnect") ) { $(this).removeClass("current"); $(this).removeClass("disconnect"); $(this).addClass("connect"); $(this).text("You are Connected") } else { $(this).removeClass("current"); $(this).removeClass("connect"); $(this).addClass("disconnect"); $(this).text("You are dis Connected") } }); 

 .connect { font-size: 150%; color: green; } .disconnect{ font-size: 150%; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a class="current" href="#">No Line</a> <p> </p>