Search code examples
jqueryevent-delegation

.on() mouseenter event works but click doesnt work jquery 2

My mind is boggled. Can anyone tell me why this works with 'mouseenter' but not with '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();
});
Solution

  • The second event being bound is firing immediately after the first one. So the div is being hidden as soon it is shown.

    Try using toggle() instead.