Question

我正在尝试使用jQuery。我有像

这样的代码

//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')});

停用按钮可以正常工作。再次激活它们不起作用。我错过了什么？

提前致谢。

Answer 1

$('.size').bind('click')无效。 bind()需要知道哪个函数要绑定为处理程序。

有1,000,000种方法可以做到这一点，但您可能会发现简单地禁用按钮更容易。这可以防止click处理程序触发;

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

Answer 2

如果您真的想继续使用bind()和unbind()，则需要存储对您绑定/取消绑定的事件处理程序的引用。以下是switcher-large按钮的示例。

//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)});

请注意：

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

...与：

完全相同

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

......与...完全相同：

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

FWIW，unbind()没有第二个参数将删除绑定到元素的所有 click事件处理程序;如果您是在共享环境中，这是非常粗鲁的，因为您可能会删除您不了解的其他事件处理程序。

绑定jquery不起作用

2 个答案: