Unbinding Right click in jquery

Question

I have tried following unbind methods to unbind element with class '.rightclickarea'.

   $('.rightclickarea').unbind();

         $('.rightclickarea').bind("contextmenu",function(e){
             e.preventDefault()
             });

But the element is not unbound of the event.So every time I call this method BindBookMarkPopUp() it tries to bind again which is creating a problem. So is there any way I can Unbind before each binding in jquery. Thanks!

function BindBookMarkPopUp() {


$('.rightclickarea').unbind("contextmenu");

$('.rightclickarea').bind('contextmenu', function(e) {

    id = $(this).attr("id");

    $("#current_id").html(id.substring(3));
    $("#current_id").attr("data-type",1);

    var $cmenu = $(".vmenu_bookmark");
    $('<div class="overlay"></div>').css({
        left : '0px',
        top : '0px',
        position : 'absolute',
        width : '100%',
        height : '100%',
        zIndex : '100'
    }).click(function() {
        $(this).remove();
        $cmenu.hide();
    }).bind('contextmenu', function() {
        return false;
    }).appendTo(document.body);
    $(".vmenu_bookmark").css({
        left : e.pageX,
        top : e.pageY,
        zIndex : '101'
    }).show();
    return false;
});

$('.vmenu_bookmark .first_li').live('click', function() {
    if ($(this).children().size() == 1) {
        alert("book_marks");

        if ($(this).attr("id") == "vmenu_bookmark") {
            $.colorbox({
                inline : true,
                width : 280,
                height : 120,
                href : "#title_content",
                title : "Enter title for Bookmark"
            });

        }
        $('.vmenu_bookmark').hide();
        $('.overlay').hide();
    }
});


$('.vmenu_bookmark .second_li').live('click', function() {


    if ($(this).children().size() == 1) {

        if ($(this).attr("id") == "vmenu_project") {

        alert("project_click")
            PopulateProjects();

            $.colorbox({
                inline : true,
                width : 500,
                height : 400,
                title : "",
                href : "#title_content_project"

            });


        }

        $('.vmenu_bookmark').hide();
        $('.overlay').hide();
    }
});

HTML Code:

<div class="vmenu vmenu_bookmark">
            <div class="first_li" id="vmenu_bookmark"><span>Add to Bookmark</span></div>
            <div class="second_li" id="vmenu_project"><span>Add to Project</span></div>
            <div style="display: none;" class="sep_li"></div>

            <div style="display:none;" class="first_li"><span>XYZ</span>
                <div class="inner_li">
                    <span>ABC</span> 
                    <span>PQR</span>
                    <span>MNO</span>
                </div>
            </div>
    </div>

Answer 1

The unbind method reverses (removes) a previously bound event handlers. You cannot unbind in advance handlers that hasn't been bound yet.

If you wish to unbind a certain event handler, you do that subsequently. For example, in order to unbind all previously bound contextmenu events, you can do:

$(".rightclickarea").unbind("contextmenu")

You can also unbind all previously bounds events of all types, just by not providing an argument:

$(".rightclickarea").unbind()

Finally, if you wish to unbind only a specific event handler, you have two options (which both require you to act differently when first binding):

Option 1

You bind your method using a namespace, for example:

$(".rightclickarea").bind("contextmenu.myUniqueHandler", function() {
   /* your code here */
})

And then you can unbind this specific event handler using:

$(".rightclickarea").unbind("contextmenu.myUniqueHandler")

Option 2

You enclose your callback function and store it inside a variable, then pass it to the bind method:

var myUniqueHandler = function() {
   /* your code here */
}

$(".rightclickarea").bind("contextmenu", myUniqueHandler)

Then you unbind it using that said variable:

$(".rightclickarea").unbind("contextmenu", myUniqueHandler)

---

Edit:

Going in-depth with your problem (after further clarification) you are actually having issues with .vmenu_bookmark firing multiple times at once, after several calls to BindBookMarkPopUp.

The problem is that your'e assuming that using unbind on .rightclickarea will reverse anything that was done (or bound) inside the callback function. It does not.

When you use unbind, you only prevent your bound function from executing any further:

// this will not execute after an unbind:
$('.rightclickarea').bind('contextmenu', function(e) {

    // ....
    // some code
    // ...
    // ..

    // VVV This will not unbind, it will still work. VVV
    $('.vmenu_bookmark .first_li').live('click', function() { 
       /// ...
    })
})

Everything you do above, will not reverse after an unbind - including your .live / .bind calls.

This means that each call to BindBookMarkPopUp will add another event handler (bind) to .vmenu_bookmark, causing them to pile up.

The solution would be to move all of your .bind() and .live() calls (including .vmenu_bookmark... and .rightclickarea) to *outside of the function*.

There is no reason for you to bind multiple times - you only have to do that once.

---