toggle functions called on click of element?

Question

Why when I first click on the span does it call function a and b, how do I make it so it calls function a on first click and on second click it calls function b?

function a(id) {
    $.post("url.php", {'id':id}, function() {
        $(".aa"+id).removeAttr('onclick');
        $(".aa"+id).attr('onclick', b(id);
    );
}
function b(id) {
    $.post("url.php", {'id':id}, function() {
        $(".aa"+id).removeAttr('onclick');
        $(".aa"+id).attr('onclick', a(id);
    );
}

<span class="aa '.$item['id'].'"  onclick="a(' . $item['id'] . ')">A</span>

Answer 1

You can achieve this much more simply by attaching your events using Javascript and toggling a class to determine which function should be called. Try this:

<span class="a toggle" data-id="'.$item['id'].'">A</span>

$(function() {
    $('.toggle').click(function() {
        $(this).toggleClass('a b');
    });

    $(document).on('click', '.toggle.a', function() {
        var $el = $(this);
        $.post("url.php", { id: $el.data('id') }, function() {
            // do something when .a clicked...
        });
    });

    $(document).on('click', '.toggle.b', function() {
        var $el = $(this);
        $.post("url.php", { id: $el.data('id') }, function() {
            // do something when .b clicked...
        });
    });
});

Example fiddle

I presume the logic of your actual a() and b() functions in your production code is different...

Answer 2

You can use $.data() to store which function got executed and by taking reference of it, you can call required function like below:

 function a() { alert("function A"); } function b() { alert("function B"); } $(document).ready(function(){ $("span.aa").click(function(){ var prevCalledFunction = $(this).data("function"); if(prevCalledFunction == null || prevCalledFunction == "B"){ a(); $(this).data("function","A"); } else{ b(); $(this).data("function","B"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <span class="aa">A</span> 

Answer 3

do something like this, simply set an attribute on the span element to show if it has been clicked for the first time and if yes it selects the second function you want. Then Assume after the second click, the third click should go back to first function and so on.

 $(document).ready(function() { $("span.aa").click(function() { //checking if the span has been clicked before since the page was loaded via if it has the attribute "checked_before" if ($(this).is('[check_before]') == false) { alert("Just called function a"); //a(id); $(this).attr("check_before", "true"); } else if ($(this).is('[check_before]') == true) { alert("just called function b"); //b(id); $(this).removeAttr("check_before"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><span class='aa'>Click me </span>