.on（）mouseenter事件有效但点击不起作用jquery 2

Question

我的思绪令人难以置信。任何人都可以告诉我为什么这适用于＆＃39; mouseenter＆＃39;但没有点击＆＃39;？

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

不是它不起作用，你只需在点击时调用这两个功能。

尝试改为（1次点击功能）：

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