Unbind/off clicked event does not work in jQuery?

Question

I use jquery (1.10) to unbind clicked events:

function fnDoVoteContent() {
    var btnUpvote = ".btn-upvoting";
    var btnDownVote = ".btn-downvoting";

    $(document).on('click', btnUpvote, function(){
        vote(param1, param2, param3);
    });


    $(document).on('click', btnDownVote, function(){
        vote(param1, param2, param3);
    });
}

function vote(param1, param2, param3) {

    $.ajax({
        url: votingUrl,
        cache: false,
        type: "POST",
        dataType: "json",
        beforeSend: function(){
            //do business logic
           $("a").off( "click" ); // Line 1: Unbind clicked events

        },
        complete: function(){
            //do business logic
           $("a").on( "click" ); // Line 2: re-bind again

        },
        success: function(data) {
            //update data
        }
    });
}

Business logic code worked, but the code at Line 1 and 2 did not work. Am I doing something wrong?

Answer 1

That's not at all how it works? You have to bind and unbind to the same selector, and you have to rebind to a function again, just doing $('a').on('click') does nothing.

For this you could use namespaced events

function fnDoVoteContent() {
    var btnUpvote = ".btn-upvoting";
    var btnDownVote = ".btn-downvoting";

    // bind event handlers
    $(document).on('click.custom', btnUpvote, function(){
        vote(param1, param2, param3);
    });

    $(document).on('click.custom', btnDownVote, function(){
        vote(param1, param2, param3);
    });
}

function vote(param1, param2, param3) {

    $.ajax({
        url: votingUrl,
        cache: false,
        type: "POST",
        dataType: "json",
        beforeSend: function(){
            //do business logic

            // unbind has to be done on the same selector
            $(document).off('click.custom');

        },
        complete: function(){
            //do business logic
            $(document).on('click.custom', btnUpvote, function(){
                vote(param1, param2, param3);
            });

            $(document).on('click.custom', btnDownVote, function(){
                vote(param1, param2, param3);
            });

        },
        success: function(data) {
            //update data
        }
    });
}