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

绑定(bind)的第二个事件在第一个事件之后立即触发。因此 div 一显示就被隐藏。

尝试使用toggle()代替。