绑定jquery不起作用

Question

I am experimenting with jQuery. I have a code like

//some buttons to edit a div's style (add/remove classes)
<button class="size" id="switcher-large"> Large Print </button>
<button class="size" id="switcher-default"> Default </button>
<button class="size" id="switcher-narrow"> Narrow Column </button>

//buttons to activate/deactivate the above buttons
<button class="hide" id="hide"> Hide it </button>
<button class="hide" id="active"> Activate it </button>


//when buttons clicked, add/remove classes to a div
$('#switcher-large').click(function(){$('#one').removeClass().addClass('large'); });    
$('#switcher-default').click(function(){$('#one').removeClass(); });
$('#switcher-narrow').click(function(){$('#one').removeClass().addClass('narrow'); });

//activate/deactivate the buttons with the "size" class
$('#hide').click(function(){ $('.size').unbind('click'); });
$('#active').click(function(){$('.size').bind('click')});

Deactivating the buttons works fine. Activating them back again does not work. What am I missing?

Thanks in advance.

Answer 1

$('.size').bind('click') is not valid. bind() needs to know which functions to bind as the handler.

There are 1,000,000 ways to do this, but you might find it easier to simply disable the buttons. This prevents the click handlers firing;

$('#hide').click(function(){ $('.size').prop('disabled', true); });
$('#active').click(function(){ $('.size').prop('disabled', false); });

Answer 2

If you really want to persist your use of bind() and unbind() , you need to store a reference to the event handlers you're binding/ unbinding. Here's an example for the switcher-large button.

//when buttons clicked, add/remove classes to a div
function switcherLargeHandler(){ $('#one').removeClass().addClass('large'); }

// Bind it by default
$('#switcher-large').click(switcherLargeHandler);  

$('#hide').click(function(){ $('#switcher-large').unbind('click', switcherLargeHandler); });
$('#active').click(function(){$('#switcher-large').bind('click', switcherLargeHandler)});

Note that:

$('#switcher-large').click(function () { /* Do something */ });

... is exactly the same as:

$('#switcher-large').bind('click', function () { /* Do something */ });

... which is exactly the same as:

$('#switcher-large').on('click', function () { /* Do something */ });

---

FWIW, unbind() without a second parameter will remove all click event handlers bound to an element; which is quite rude if you're in a shared enviroment, as you can potentially remove other event handlers you didn't know about.