2

I use 

$('#test').unbind('click');

to remove the click event on the #test item. How do I make the item clickable again?

Actually I have a table. On click event a context menu appears. But if there are no entries the menu has to be disabled. So I use unbind above. Since the context menu is generated by a plugin I do not know how to make it clickable again.

Any ideas?

Update: this is how the context menu is set up

 $('#contacts tbody tr').contextMenu('myMenu1', {
    bindings: {
      'sms': function(t) {},
      'delete': function(t) {}
    } 
 });

Since I am still not sure how to solve my problem I will describe it a little more. I use the lightweight context-menu plugin in jQuery to display context menus. 

#contacts tbody tr

are the table rows and myMenu1 is the context menu that appears on tr click.

On my page I have a table. Each row has its own context menu, well always the same but function(t) referes always to the clicked row.

Well, the table may be empty so I want to disable the context menu. I believe there are may ways to do that. One is to unbind the click event, this does not work for me.

I hope anyone has an idea.

DarkLeafyGreen
  • 69,338
  • 131
  • 383
  • 601

2 Answers2

3

Cache the handler to a variable. Then bind and unbind using that reference.

Instead of binding your click event inline:

$('#test').bind('click', function(){
    alert('hi!');
});

Declare the function to a variable: 

var clickHandle = function(){
    alert('hi!');
};

And then bind using the variable name:

$('#test').bind('click', clickHandle);

Then you can unbind the specific click handler:

$('#test').unbind('click', clickHandle);

Then you can still re-bind the same function:

$('#test').bind('click', clickHandle);

Took a quick look at the source. The event is bound to contextmenu, not click.

You can access the function through the element's data.events property (similar to what j3frea was saying). Have a look at this fiddle example for a full resolution.

Essentially you can do this:

var cachedHandler = null;
// disable
cachedHandler = $('#demo2').data('events').contextmenu[0].handler;
$('#demo2').unbind('contextmenu', cachedHandler);
// enable
$('#demo2').bind('contextmenu', cachedHandler);
Josiah Ruddell
  • 29,697
  • 8
  • 65
  • 67
  • @ArtWorkAD - Cache/store/save. instead of declaring the function anonymously inline, save it to a variable. I updated the answer to make it more clear. – Josiah Ruddell Jan 18 '11 at 21:14
  • I tried it this way but I am not sure if that works, I've updated my question with my code. I am not sure what to cache... – DarkLeafyGreen Jan 18 '11 at 21:45
  • @ArtWorkAD - took a quick look at the source and found you problem. See the updated solution and check out the fiddle. It may be worth creating a new plugin and including a disable api method (or possibly forking the current plugin). – Josiah Ruddell Jan 19 '11 at 14:42
  • thanks, on jsFiddle it works for me too, but when I use the code in my project my tab navigation does not work anymore. http://jsfiddle.net/mSYfs/1/ the variable c is 0 if the table is empty, in this case I unbind the events and I can not navigate with my tabs anymore. Does "unbind" unbind all events? – DarkLeafyGreen Jan 19 '11 at 21:14
  • @ArtWorkAD - the fiddle example you showed me seems to be working. Not sure where you problem is. You have `c = 0` and no context menu shows. It does not unbind all events, because you are telling it which one to unbind. however, you may need to make sure that you are accessing a individual `tr`, instead of all `tr`s – Josiah Ruddell Jan 19 '11 at 21:22
  • what do you mean with individual tr? give the tr that indicates that the table is empty a id? – DarkLeafyGreen Jan 19 '11 at 22:01
1

Take a look at this question Rebind DOM Event with jQuery

Josiah's solution is preferable but if you really wanted to unbind the click event entirely I believe you could do this:

var storedClick = $('#test').data('events').click[0].handler;
$('#test').unbind('click');
$('#test').bind('click', storedClick);

Remember that data('events').click is an array so you would need to store the handler for every member of the array.

Community
  • 1
  • 1
jcuenod
  • 55,835
  • 14
  • 65
  • 102
  • this does not work to, maybe it's the fact that the click handler is applied to each tr element in the table... – DarkLeafyGreen Jan 19 '11 at 10:23
  • the problem is that there is no click handler that I could bind, in my app I have just the code above in my question, thats all, so I do not know how to obtain clickHandle that I need to bind it again – DarkLeafyGreen Jan 19 '11 at 10:42