event.preventDefault() on first click then remove

Question

I have the default anchor disabled if it has a class subnav as shown in this fiddle.

I only want this disabled for the first click then I want the normal anchor functionality to be brought back. What is the best way to do this? I tried something involving the below code but this didn't seem to work?

  $(this).unbind(event.preventDefault());

maybe something like this psuedo code?

if (click count === 0 ) {
    event.preventDefault();
}

or is there a better way to approach this?

Answer 1

Bind the event handler with one()^docu. It executes once and automatically unbinds itself afterwards.

$(".subnav a").one("click", function(event) {
  event.preventDefault();
});

Alternatively you can unbind it yourself directly in the function. It's good to use a namespace for that

$(".subnav a").bind("click.myclick", function(event) {
  event.preventDefault();
  $(this).unbind(".myclick");
});

Answer 2

This works well. The second click goes to the page...

$(".smallNavigation > ul > li > a").click(function (e) {

    $("ul.sub-menu").hide();
    $("ul.sub-menu", $(this).parent("li")).show();

    e.preventDefault();
    $(this).unbind(e);

}