jquery - .on() mouseenter 事件有效，但单击无效 jquery 2

Question

我的脑子里糊涂了。谁能告诉我为什么这适用于'mouseenter'而不适用于'click'？

http://jsfiddle.net/jxUGw/3/

//////THIS DOESNT WORK
$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').show();
});

$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').hide();
});


/////THIS WORKS
$('#view_panel').on('mouseenter', 'img.main_image', function(){
    $(this).parent().find('div.image_box').show();
});

$('#view_panel').on('mouseleave', 'img.main_image', function(){
    $(this).parent().find('div.image_box').hide();
});

Answer 1

绑定的第二个事件在第一个事件之后立即触发。所以div一显示就被隐藏了。

尝试toggle()改用。

Answer 2

并不是说它不起作用，您只需在单击时调用这两个函数。

试试看（一键式功能）：

$('#view_panel').on('click', 'img.main_image', function(){
    $(this).parent().find('div.image_box').toggle();
});